8 card Cards

This component is used throughout the system to group elements. Combine elevation and padding classes to achieve different hierarchies of content.

Examples

Default styling

This is a headline

This is a paragraph

.elevation-00

Small border, no shadow

This is a headline

This is a paragraph

.elevation-01

small shadow

This is a headline

This is a paragraph

.elevation-02

medium shadow

This is a headline

This is a paragraph

.elevation-03

large shadow

This is a headline

This is a paragraph

.lg-pad.elevation-01

Increase the amount of padding, for use with larger cards

This is a headline

This is a paragraph

.sm-pad

decrease the amount of padding, for use with smaller cards.

This is a headline

This is a paragraph

.radius-md

p.$spacing-lg border-radius

This is a headline

This is a paragraph

.radius-lg

36px border-radius

This is a headline

This is a paragraph

.is-inverse

dark background with light text

This is a headline

This is a paragraph

.is-shaded

card has slightly darker background with normal text

This is a headline

This is a paragraph

.is-callout-bg

slightly darker background, intended to be used with no elevation classes.

This is a headline

This is a paragraph

.is-shaded.highlight

border radius is removed and blue border is added to the left side

This is a headline

This is a paragraph

.zoom-on-hover

card is eleveated slightly on hover. To be used with .expand-on-hover to denote full-card links.

This is a headline

This is a paragraph

Markup: ../../../../../styleguide/styleguide-examples/card.njk

<div style="max-width: 400px;margin:20px auto">
  <section class="card ">
    <h3 class="sumo-page-subheading mb-0">This is a headline</h3>
    <p>This is a paragraph</p>
  </section>
</div>

Source: ../kitsune/sumo/static/sumo/scss/components/_card.scss, line 4

8.1 card.grid Card Grid

This collection of cards is presented as a scrollable list on mobile and an array of cards on desktop. Any type of card styles can be used in this layout.

Examples

Default styling

Private Browsing Use Firefox without saving history

Firefox Private Browsing is great for viewing website without saving things like cookies, but did you know there is more you can do? This text should be longer than needed, and will be truncated with CSS. Truncating at 40 words should be sufficient.

Private Browsing Use Firefox without saving history

.is-four-wide

changes the width of the cards to display in rows of four on desktop

Private Browsing Use Firefox without saving history

Markup: ../../../../../styleguide/styleguide-examples/card-grid.njk


  <div class="sumo-card-grid ">
    <div class="scroll-wrap">
      <div class="card card--article">
          <img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
    </div>
  </div>

Source: ../kitsune/sumo/static/sumo/scss/components/_card-grid.scss, line 4