Card (Version 2)

Cards provide containers for blocks of content (such as news stories, profiles, events, etc) usually with a title, image, and a small text block, often with images. They work best when displayed as a group in a grid. They are designed to be flexible and support a wide variety of different layouts, pieces of content, and designs.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleStory CardsStory Cards (Alt)Story Cards (Alt 2)

Open Full Example

<div class="grid-v2 grid-v2--3col">
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
</div>

Open Full Example

<div class="grid-v2 grid-v2--3col">
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
        <div class="overlay overlay--circle palette-bg-uo-green">
          <div>Mar</div>
          <div>21</div>
        </div>
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
        <div class="overlay overlay--circle palette-bg-uo-green">
          <div>Mar</div>
          <div>21</div>
        </div>
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__image">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
        <div class="overlay overlay--circle palette-bg-uo-green">
          <div>Mar</div>
          <div>21</div>
        </div>
      </div>
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua. Stet clita kasd gubergren, no sea takimata
        sanctus est.v</div>
      <div class="card-v2__footer"><a class="cta-button">Call to Action Button</a></div>
    </div>
  </div>
</div>

Open Full Example

<div class="grid-v2 grid-v2--3col">
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__image card-v2__image--inset">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__body">At vero eos et accusam, et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua.</div>
      <div class="card-v2__footer">
        <p><a class="cta-button">Call to Action Button</a></p>
        <div class="card-v2__tags card-v2__section"><a href="https://uoregon.edu">Labels Here</a>, <a
            href="https://uoregon.edu">Journalism</a>, <a href="https://uoregon.edu">Majors &amp; Minors</a></div>
      </div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__image card-v2__image--inset">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__body">At vero eos et accusam, et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua.</div>
      <div class="card-v2__footer">
        <p><a class="cta-button">Call to Action Button</a></p>
        <div class="card-v2__tags card-v2__section"><a href="https://uoregon.edu">Labels Here</a>, <a
            href="https://uoregon.edu">Journalism</a>, <a href="https://uoregon.edu">Majors &amp; Minors</a></div>
      </div>
    </div>
  </div>
  <div class="grid-v2__item">
    <div class="card-v2">
      <div class="card-v2__header">
        <div class="card-v2__title">Title Element</div>
        <div class="card-v2__subtitle">Optional Subtitle Element</div>
      </div>
      <div class="card-v2__image card-v2__image--inset">
        <img src="/test-image-landscape.jpg" alt="Test Image" />
      </div>
      <div class="card-v2__body">At vero eos et accusam, et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus. Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volen suptua.</div>
      <div class="card-v2__footer">
        <p><a class="cta-button">Call to Action Button</a></p>
        <div class="card-v2__tags card-v2__section"><a href="https://uoregon.edu">Labels Here</a>, <a
            href="https://uoregon.edu">Journalism</a>, <a href="https://uoregon.edu">Majors &amp; Minors</a></div>
      </div>
    </div>
  </div>
</div>

Usage

Add the card element to the page with the subelements needed for your display. Card provide a rich set of subelements, many of which can be placed in any order you need for your card. Cards have a light border by default, if you want to remove this, add the b0 utility class to the card to remove it.

Guidance

When to Use Cards

• To highlight a story or group of stories: Cards work well for previews/lists of highlighted news stories or articles, since they provide a quickly scannable listing with photos, teasers, and links.
• For profiles of people: Cards are great for highlighting profiles of people, both as an individual card on a page as a highlight, or in a group of profiles.

Usage Guidance

• Keep consistent style when grouped together: Cards in a grid that highlight the same type of content should have a consistent style so that they fit well together.
• Use the utility classes to customize: Cards are designed to with with utility classes for adjusting borders, backgrounds, spacing, and so on. Using the b0 class, for example, removes the default border on the cards, and other classes allow for tailoring the card’s style to the needs of your content.
• Do not use for full-width content: Cards are designed to be narrower snippets of content, and should be restricted in size to not fit full-width content.

Accessibility Guidance

• Use proper headings for titles: When using a title element in a card, make sure those elements have the proper heading level set respective to the parent of the card.

Elements

Element	Description	Usage	Required	Multiple
Header	A Header section at the top of the card	Place titles and banners here	No	No
Body	The center of the card, expands to match height in grids	Place the core content of the card here	Yes	No
Footer	The bottom of the card, fixed to the bottom in grids	Place calls to action or links here	No	No
Section	An arbitrary section used to subdivide the card	Use these for subdividing more complex cards	No	Yes
Side By Side	Provides a container for left and right columns	Use these for split column content	No	Yes
Left or Right Columns	A column in a side-by-side section	Use a pair of these in a Side by Side to divide content	No	Yes
Title	The card title	Short text that describes the card	No	Yes
Subtitle	The card subtitle	A title, story type, or other key info	No	Yes
Image	An Image	A story photo or profile picture	No	Yes
Date	The date of the content	A story publishing date	No	Yes
Tags	Links to tags or related content	Related content tags	No	Yes

Modifier Classes

• card-v2__image--inset - Applied to image elements to make them have the same padding as other card content, without this they will be full width by default.