DOTD Component Library

Quick Links Cards: Default 

<section class="c-quick-links-cards l-wrap l-container--full">
      <div class="c-quick-links-cards__container l-container">
          <div class="c-section-header c-section-header--split l-container--md">
              <div class="c-section-header__title">
                  <span class="o-kicker c-section-header__kicker">
                      Kicker
                  </span>
                  <h2 class="o-heading o-heading--xl c-section-header__heading">
                      Heading
                  </h2>
              </div>
              <div class="o-dek c-section-header__dek">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.
              </div>
              <a class="o-button c-section-header__button" href="/">
                  <span class="o-button__label">
                      View All
                  </span>
              </a>
          </div>
          <div class="c-quick-links-cards__items" data-grid="grid 6@md 4@lg">
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-01 {
                          background-image: url("https://picsum.photos/id/43/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-01 {
                              background-image: url("https://picsum.photos/id/43/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-01"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-02 {
                          background-image: url("https://picsum.photos/id/57/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-02 {
                              background-image: url("https://picsum.photos/id/57/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-02"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-03 {
                          background-image: url("https://picsum.photos/id/133/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-03 {
                              background-image: url("https://picsum.photos/id/133/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-03"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-04 {
                          background-image: url("https://picsum.photos/id/134/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-04 {
                              background-image: url("https://picsum.photos/id/134/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-04"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-05 {
                          background-image: url("https://picsum.photos/id/182/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-05 {
                              background-image: url("https://picsum.photos/id/182/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-05"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
              <div class="c-quick-links-card js-gsap-scale-in">
                  <a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
                  </a>

                  <style>
                      .o-background-image--quick-links-card-06 {
                          background-image: url("https://picsum.photos/id/171/480/270");
                      }

                      @media(min-width: 480px) {
                          .o-background-image--quick-links-card-06 {
                              background-image: url("https://picsum.photos/id/171/768/432");
                          }
                      }
                  </style>
                  <div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-06"></div>
                  <div class="c-quick-links-card__content">
                      <div class="c-quick-links-card__body">
                          <h3 class="o-heading o-heading--sm c-quick-links-card__heading">
                              Card Title
                          </h3>
                      </div>
                      <a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
                          <span class="o-link__label">
                              View More
                          </span>
                          <span class="o-icon o-icon--md">
                              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
          </div>
      </div>
  </section>
 
{% set base_class = quick_links_cards.base_class|default('c-quick-links-cards') %}
{% if quick_links_cards.items %}
  <section class="{{ bem(base_class, quick_links_cards.element, quick_links_cards.modifiers, quick_links_cards.extra) }} l-wrap l-container--full">
    <div class="{{ bem(base_class, 'container') }} l-container">
      {% include "@section-header" with quick_links_cards %}
      <div class="{{ bem(base_class, 'items') }}" data-grid="grid 6@md 4@lg">
        {% for item in quick_links_cards.items %}
          {% set modifiers = {"modifiers": quick_links_cards.modifiers} %}
          {% set quick_links_card = item.quick_links_card|default({})|merge(modifiers) %}
          {% set item = item|merge({"quick_links_card": quick_links_card}) %}
          {% include "@quick-links-card" with item %}
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}
 
{
  "quick_links_cards": {
    "section_header": {
      "kicker": "Kicker",
      "heading": "Heading",
      "dek": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.",
      "button": {
        "url": "/",
        "text": "View All"
      },
      "modifiers": "split"
    },
    "items": [
      {
        "quick_links_card": {
          "id": "01",
          "image": "https://picsum.photos/id/43",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      },
      {
        "quick_links_card": {
          "id": "02",
          "image": "https://picsum.photos/id/57",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      },
      {
        "quick_links_card": {
          "id": "03",
          "image": "https://picsum.photos/id/133",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      },
      {
        "quick_links_card": {
          "id": "04",
          "image": "https://picsum.photos/id/134",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      },
      {
        "quick_links_card": {
          "id": "05",
          "image": "https://picsum.photos/id/182",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      },
      {
        "quick_links_card": {
          "id": "06",
          "image": "https://picsum.photos/id/171",
          "heading": "Card Title",
          "link": {
            "url": "/",
            "text": "View More"
          }
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $QUICK-LINKS-CARDS
\*------------------------------------ */

.c-quick-links-cards {
  &__items {
    margin-top: var(--dotd-space-xl);
    margin-bottom: var(--dotd-space-xl);
    row-gap: var(--dotd-space-xxl);

    .c-quick-links-cards--image-overlay & {
      margin-bottom: 0;
      row-gap: var(--dotd-space-lg);
    }
  }
}
  • URL: /components/raw/quick-links-cards/_quick-links-cards.scss
  • Filesystem Path: components/03-organisms/sections/quick-links-cards/_quick-links-cards.scss
  • Size: 374 Bytes

No notes defined.