D.School Component Library

Action Card: Teal 

<div class="c-action-card" data-theme="teal">

    <style>
        .o-background-image--action-card-bg-teal {
            background-image: url("../../images/action-card/action-card-bg-teal.webp");
        }

        @media(min-width: 768px) {
            .o-background-image--action-card-bg-teal {
                background-image: url("../../images/action-card/action-card-bg-teal.webp");
            }
        }

        @media(min-width: 480px) {
            .o-background-image--action-card-bg-teal {
                background-image: url("../../images/action-card/action-card-bg-teal.webp");
            }
        }
    </style>
    <div class="o-background-image o-background-image--action-card-bg-teal"></div>

    <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">
                        Shop
                    </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">
                        Tools
                    </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">
                        Professional Education
                    </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": "Shop",
        "url": "/"
      },
      {
        "text": "Tools",
        "url": "/"
      },
      {
        "text": "Professional Education",
        "url": "/"
      }
    ],
    "ticker_tape": {
      "text": "Learn More"
    },
    "attributes": {
      "data-theme": "teal"
    },
    "background": {
      "image": {
        "id": "action-card-bg-teal",
        "src": "../../images/action-card/action-card-bg-teal.webp",
        "sources": [
          {
            "media": "(min-width: 768px)",
            "srcset": "../../images/action-card/action-card-bg-teal.webp"
          },
          {
            "media": "(min-width: 480px)",
            "srcset": "../../images/action-card/action-card-bg-teal.webp"
          }
        ]
      }
    }
  }
}
  • 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

No notes defined.