O3 World Component Library

Cards 

<article class="card__container card__container--link">
    <a href="#" aria-label="Full Card Link">
        <div class="u-padding-xl card__content">
            <h4 class="u-margin-hug card__title">Full Card Link</h4>
            <div class="card__text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <!-- /.card__text -->
            <div class="card__btn-container">
                <div class="btn card__btn">
                    Read More <span class="u-sr-only">About Full Card Link</span>
                </div>
            </div>
            <!-- /.card__btn-container -->
        </div>
        <!-- /.card__content -->
    </a>
</article>
<!-- /.card__container -->
<article class="card__container card__container--link">
    <a href="#" aria-label="Full Card Link with Date and Image">
        <div class="card__img">
            <img src="https://picsum.photos/800/400" alt="Alternative text goes here.">
        </div>
        <!-- /.card__img -->
        <div class="u-padding-xl card__content">
            <p class="h5 card__meta">
                Article <span role="presentation" aria-hidden="true">&#8226;</span>
                <span class="u-sr-only">Date: </span><time datetime="2018-12-08">Dec. 08 2018</time>
            </p>
            <!-- /.card__meta -->
            <h4 class="u-margin-hug card__title">Full Card Link with Date and Image</h4>
            <div class="card__text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <!-- /.card__text -->
            <div class="card__btn-container">
                <div class="btn card__btn">
                    Read More <span class="u-sr-only">About Full Card Link with Date and Image</span>
                </div>
            </div>
            <!-- /.card__btn-container -->
        </div>
        <!-- /.card__content -->
    </a>
</article>
<!-- /.card__container -->
<article class="card__container">
    <div class="u-padding-xl card__content">
        <p class="h5 card__meta">
            Article <span role="presentation" aria-hidden="true">&#8226;</span>
            <span class="u-sr-only">Date: </span><time datetime="2019-15-08">Aug. 15 2019</time>
        </p>
        <!-- /.card__meta -->
        <h4 class="u-margin-hug card__title">Card with Button Link and Date</h4>
        <div class="card__text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <!-- /.card__text -->
        <div class="card__btn-container">
            <a href="#" class="btn" aria-label="Read More About Card with Button Link and Date">
              Read More
            </a>
        </div>
        <!-- /.card__btn-container -->
    </div>
    <!-- /.card__content -->
</article>
<!-- /.card__container -->
<article class="card__container card__container--link">
    <a href="#" aria-label="Card with Button Link">
        <div class="u-padding-xl card__content">
            <h4 class="u-margin-hug card__title">Card with Button Link</h4>
            <div class="card__text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <!-- /.card__text -->
            <div class="card__btn-container">
                <div class="btn card__btn">
                    Read More <span class="u-sr-only">About Card with Button Link</span>
                </div>
            </div>
            <!-- /.card__btn-container -->
        </div>
        <!-- /.card__content -->
    </a>
</article>
<!-- /.card__container -->
 
{% for card in cards %}
  <article class="{{ card.link ? 'card__container card__container--link' : 'card__container' }}">
    {% if card.link %}
      <a href="{{ card.href }}" aria-label="{{ card.title }}">
    {% endif %}
    {% if card.image %}
      <div class="card__img">
        <img src="{{ card.image.src }}" alt="{{ card.image.alt }}">
      </div>
      <!-- /.card__img -->
    {% endif %}
    <div class="u-padding-xl card__content">
      {% if card.date %}
        <p class="h5 card__meta">
          Article <span role="presentation" aria-hidden="true">&#8226;</span>
          <span class="u-sr-only">Date: </span><time datetime="{{ card.date.datetime }}">{{ card.date.text }}</time>
        </p>
        <!-- /.card__meta -->
      {% endif %}
      {% if card.title %}
        <h4 class="u-margin-hug card__title">{{ card.title }}</h4>
      {% endif %}
      {% if card.text %}
        <div class="card__text">
          <p>{{ card.text }}</p>
        </div>
        <!-- /.card__text -->
      {% endif %}
      {% if card.btn %}
        <div class="card__btn-container">
          {% if card.link %}
            <div class="btn card__btn">
              {{ card.btn.text }} <span class="u-sr-only">{{ card.btn.srText }}</span>
            </div>
          {% else %}
            <a href="{{ card.btn.href }}" class="btn" aria-label="{{ card.btn.text }} {{ card.btn.srText }}">
              {{ card.btn.text }}
            </a>
          {% endif %}
        </div>
        <!-- /.card__btn-container -->
      {% endif %}
    </div>
    <!-- /.card__content -->
    {% if card.link %}
      </a>
    {% endif %}
  </article>
  <!-- /.card__container -->
{% endfor %}
 
{
  "cards": [
    {
      "link": true,
      "href": "#",
      "title": "Full Card Link",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "btn": {
        "text": "Read More",
        "srText": "About Full Card Link"
      }
    },
    {
      "link": true,
      "href": "#",
      "image": {
        "src": "https://picsum.photos/800/400",
        "alt": "Alternative text goes here."
      },
      "date": {
        "datetime": "2018-12-08",
        "text": "Dec. 08 2018"
      },
      "title": "Full Card Link with Date and Image",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "btn": {
        "text": "Read More",
        "srText": "About Full Card Link with Date and Image"
      }
    },
    {
      "date": {
        "datetime": "2019-15-08",
        "text": "Aug. 15 2019"
      },
      "title": "Card with Button Link and Date",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "btn": {
        "href": "#",
        "text": "Read More",
        "srText": "About Card with Button Link and Date"
      }
    },
    {
      "link": true,
      "href": "#",
      "title": "Card with Button Link",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "btn": {
        "text": "Read More",
        "srText": "About Card with Button Link"
      }
    }
  ]
}
  • Content: 
    /*
 * Card Styles
 *
 *****************************************************************************/

.card {

  &__container {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: ($base-spacing * 2);
    box-shadow: $box-shadow-default;
    width: 100%;

    &--link {
      height: 100%;
      text-decoration: none; // override default link styling
      transition: box-shadow $transition-duration;

      &:focus,
      &:hover {
        box-shadow: $box-shadow-hover;

        .card__btn { background-color: color(primary, hover); } // sass-lint:disable-line nesting-depth
      }
    }
  }

  &__img {

    img { width: 100%; }
  }

  &__content {
    position: relative;
    display: flex;
    flex-flow: column wrap;
    flex-grow: 1; // Safari fix to account for inaccurate flex stretch
    align-items: flex-start;
  }

  &__meta {}

  &__title {}

  &__btn-container {
    margin-top: $base-spacing;
    width: 100%;

    @media (min-width: $breakpoint-md) {
      display: flex;
      align-items: flex-end;
    }
  }

  &__text {
    width: 100%;
    color: color(default, dark);
  }
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: components/card/_card.scss
  • Size: 1.1 KB

Usage

Cards can display a lot of information in an organized layout, giving users teaser information and linking to detail pages if they wish to read more.

This card component comes with two options for setting up the link:

  1. The entire card can be a clickable link. With this option, the card__container--link modifier class should be added to the outer container.
  2. The entire card is not clickable but includes a button to link to more information.

Labelling Expectations

  • Each card link should include an aria-label describing the link content.

Focus Expectations

  • Card links should have visible keyboard focus state

Keyboard Expectations

  • Tab = Move to next focusable element
  • Control + Option + Shift ↓ = Navigate into card link content with screen reader
  • ↑ ↓ = Cycle through card content after navigating into card links

Screen Reader Expectations

When interacting with cards, screen readers should announce the following information:

  • Link content
  • Card content will be read if navigated into

Tab Order Expectations

When navigating through a card, the following tab order is expected:

  1. The next tab keypress will advance to the next card link.