Action Card

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-action-card">

    <span class="o-kicker">
        <span class="o-kicker__separator">&middot;</span> Educate Yourself
    </span>

    <div class="c-action-card__nav">
        <nav role="navigation" class="c-action" data-theme="red">

            <a class="o-link c-action__link" href="/" target="_self">
                <span class="o-icon">
                    <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
                    </svg>
                </span>
                <span class="o-link__label">
                    <span class="action__text--top"><span class="o-heading--h3-primary">Study</span> <span class="c-action__separator">&middot;</span><span class="o-heading--h3-secondary-bold">Find Our <em>&nbsp;Degrees</em></span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary-bold"><em>& Enroll</em></span><span class="o-heading--h3-secondary">&nbsp;in Classes</span></span>
                </span>
            </a>
        </nav>

        <ul class="c-action-card__links">
            <li class="c-action-card__link-item">

                <a class="o-link c-action-card__link" href="/" target="_self">
                    <span class="o-link__label">
                        Stories
                    </span>
                    <span class="o-icon transition">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                        </svg>
                    </span>
                </a>
            </li>
            <li class="c-action-card__link-item">

                <a class="o-link c-action-card__link" href="/" target="_self">
                    <span class="o-link__label">
                        Our Space
                    </span>
                    <span class="o-icon transition">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                        </svg>
                    </span>
                </a>
            </li>
        </ul>
    </div>

    <div class="o-ticker-tape">
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
        <span class="o-ticker-tape__text">Learn More</span>
    </div>
</div>


        {% set base_class = action_card.base_class|default('c-action-card') %}
<div class="{{ bem(base_class, action_card.element, action_card.modifiers, action_card.extra) }}" {{ attributes(action_card.attributes) }}>
	{% if action_card.background %}
		{% include "@background" with {
      "background": action_card.background
    } %}
	{% endif %}

	{% if action_card.kicker %}
		{% include "@kicker" with {
      "kicker": action_card.kicker
    } %}
	{% endif %}


	<div class="{{ bem(base_class, 'nav') }}">
		{% render "@action" with {
    "action": {
      "attributes": {
        "data-theme": action_card.attributes.data-theme
      }
    %}

		{% if action_card.links %}
			<ul class="{{ bem(base_class, 'links') }}">
				{% for link in action_card.links %}
					<li class="{{ bem(base_class, 'link-item') }}">
						{% include "@link" with {
            "link": {
              "text": link.text,
              "url": link.url,
              "target": link.target,
              "extra": bem(base_class, 'link'),
              "arrow": true
            }
          } %}
					</li>
				{% endfor %}
			</ul>
		{% endif %}
	</div>


	{% include "@ticker-tape" with {
    "ticker_tape": action_card.ticker_tape
  } %}
</div>


        
            
            {
  "action_card": {
    "kicker": {
      "text": "<span class=\"o-kicker__separator\">&middot;</span> Educate Yourself"
    },
    "links": [
      {
        "text": "Stories",
        "url": "/"
      },
      {
        "text": "Our Space",
        "url": "/"
      }
    ],
    "ticker_tape": {
      "text": "Learn More"
    }
  }
}

File:

Content:


                                /* ------------------------------------*\
  $ACTION CARD
\*------------------------------------ */

[data-theme="gray"] {
  --action-card-ticker-tape-rotation: -75deg;
  --action-card-ticker-tape-origin-x: 6.5%;
  --action-card-ticker-tape-origin-y: 100%;
  --action-card-ticker-tape-left-margin: 0;
  --action-card-nav-text-align: flex-end;
}

[data-theme="pink"] {
  --action-card-ticker-tape-rotation: 45deg;
  --action-card-ticker-tape-origin-x: 40%;
  --action-card-ticker-tape-origin-y: top;
  --action-card-ticker-tape-left-margin: 0;
  --action-card-nav-text-align: flex-start;
} 

[data-theme="teal"] {
  --action-card-ticker-tape-rotation: 45deg;
  --action-card-ticker-tape-origin-x: 45%;
  --action-card-ticker-tape-origin-y: top;
  --action-card-ticker-tape-left-margin: 0;
  --action-card-nav-text-align: flex-start;
} 

[data-theme="cream"] {
  --action-card-ticker-tape-rotation: 15deg;
  --action-card-ticker-tape-origin-x: 0;
  --action-card-ticker-tape-origin-y: -.5rem;
  --action-card-ticker-tape-left-margin: -1rem;
  --action-card-nav-text-align: flex-start;
  --ds-color-theme-background-card: var(--ds-color-gray-101);
}

.c-action-card {
  min-height: 8.94rem;
  height: 100%;
  padding: var(--ds-space-sm);
  border-radius: var(--ds-border-radius);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .o-background-image {
    border-radius: var(--ds-border-radius);
  }

  @media screen and (min-width: $ds-breakpoint-lg) {
    min-height: 24.6875rem;
  }

  .o-background-image {
    background-color: var(--ds-color-theme-background-card);
  }

  &__nav {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--ds-space-sm);
    flex: 1;

    @include media(">large") {
      height: auto;
      margin-top: auto;
      flex: none;
      align-items: var(--action-card-nav-text-align);
      gap: var(--ds-space-md);
      padding: var(--ds-space-lg);
    }
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ds-space-xxs) var(--ds-space-sm);
    list-style: none;
    align-items: flex-end;

    @include media(">large") {
      gap: 0 var(--ds-space-md);
    }
  
    .o-link__label {
      @extend .o-heading--h4-primary;
      font-weight: var(--ds-font-weight-black);
      text-decoration: underline;
      white-space: nowrap;

      @include media(">large") {
        text-decoration: none;
      }

      &::after {
        display: none;        
      }
    }

    .o-icon {
      display: none;
    }

    .o-link:hover:not(:disabled) span:not(.o-icon)::after {
      display: block;
    }
  }

  .o-ticker-tape,
  .o-kicker {
    display: none;

    @include media(">large") {
      display: flex;
    }
  }

  .o-kicker {
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    left: var(--ds-space-sm);
    transform-origin: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: var(--ds-space-xs);
    z-index: var(--ds-z-index-top);
    @extend .o-detail--7;

    &__separator {
      @extend .o-heading--h4-secondary-bold;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: var(--ds-scale-line-height-detail-sm);
      margin-bottom: var(--ds-space-xxs);

      @include media(">large") {
        line-height: var(--ds-scale-line-height-detail-md);
      }

      @include media(">xxlarge") {
        line-height: var(--ds-scale-line-height-detail-lg);
      }
    }
  }

  .o-ticker-tape {
    position: absolute;
    background-color: var(--ds-color-theme-navigation-action-accent);
    top: var(--action-card-ticker-tape-origin-y);
    left: var(--action-card-ticker-tape-left-margin);
    width: 150%;
    transform: rotate(var(--action-card-ticker-tape-rotation));
    transform-origin: var(--action-card-ticker-tape-origin-x) 0;
  }

}

URL: /components/raw/action-card/_action-card.scss
Filesystem Path: components/02-molecules/navigation/action-card/_action-card.scss
Size: 3.9 KB

Handle: @action-card
Variants (5): Default , Cream , Pink , Teal , Gray
Preview:
- With layout
- Component only
Filesystem Path: components/02-molecules/navigation/action-card/action-card.twig
References (5): @background, @kicker, @action, @link, @ticker-tape
Referenced by (1): @main-menu-open

No notes defined.