Card

The card component, prefixed by gds-card, is a standard container component, designed to hold groups of related information.

Demo

Some quick example text to build on the card title and make up the bulk of the card's content.

    <div className="gds-card">
      <div className="gds-card__block">
          <p className="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>


    <div className="gds-card">
      <div className="gds-card__block">
          <p className="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

Error Log

Context (Color)

gds-card--white

gds-card--no-shadow

gds-card--underlined

gds-card--underlined-secondary

gds-card--xl

gds-card--lg

gds-card--md

gds-card--sm

gds-card--xs

gds-card--dark

Size

gds-card--xl

gds-card--lg

gds-card--md

gds-card--sm

gds-card--xs

Add Ons

gds-card--no-top

gds-card__block

gds-card__text

gds-card--no-shadow

gds-card--underlined

gds-card--underlined-secondary