Card

HTML

A card groups content in a context.

Basic

Title

Body
HTML
    <div class="card">
  <div class="card__header">
    <h3>Title</h3>
  </div>

  <div class="card__body">
    Body
  </div>

  <div class="card__footer">
    Footer
  </div>
</div>
  

With a button

Title

Body
HTML
    <div class="card">
  <div class="card__header">
    <h3>Title</h3>

    <button type="button" class="button">Action</button>
  </div>

  <div class="card__body">
    Body
  </div>

  <div class="card__footer">
    Footer
  </div>
</div>
  

With an input

Title

Body
HTML
    <div class="card">
  <div class="card__header">
    <h3>Title</h3>

    <form class="form">
      <div class="form__item">
        <div class="form__wrapper">
          <div class="form__input-wrapper">
            <input class="form__input" id="form_id" type="text" name="form_id" placeholder="Search">
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="card__body">
    Body
  </div>

  <div class="card__footer">
    Footer
  </div>
</div>
  

With navigation and button

HTML
    <div class="card">
  <div class="card__header">
    <nav class="nav">
      <ul>
        <li>
          <a href="/docs/card" class="is-active">First item</a>
        </li>
        <li>
          <a href="/docs/changelog">Second item</a>
        </li>
        <li>
          <a href="/docs/contribute">Third item</a>
        </li>
        <li>
          <a href="/docs/about" class="is-disabled">Fourth item</a>
        </li>
      </ul>
    </nav>

    <button type="button" class="button">
      Action
    </button>
  </div>

  <div class="card__body">
    Body
  </div>

  <div class="card__footer">
    Footer
  </div>
</div>
  

With image

Card image

Title

Body
Card image

Title

Body
HTML
    <div class="grid grid--1 md:grid--2">
  <div class="card">
    <div class="card__image">
      <img src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Card image">
    </div>
    <div class="card__header">
      <h3>Title</h3>
    </div>
    <div class="card__body">
      Body
    </div>
    <div class="card__footer">
      Footer
    </div>
  </div>

  <div class="card">
    <div class="card__image">
      <img src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Card image">
    </div>
    <div class="card__header">
      <h3>Title</h3>
    </div>
    <div class="card__body">
      Body
    </div>
    <div class="card__footer">
      Footer
    </div>
  </div>
</div>
  

With a list

Title

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <div class="card" slot="body">
  <div class="card__header">
    <h3>Title</h3>
  </div>
  <div class="card__body">
    <ul class="list list--large list--divide list--no-gutter list--hover">
      <li>
        <div>
          <h3>First item</h3>
          <p>Description of the first item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small">Action</button>
        </div>
      </li>

      <li>
        <div>
          <h3>Second item</h3>
          <p>Description of the second item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small">Action</button>
        </div>
      </li>

      <li>
        <div>
          <h3>Third item</h3>
          <p>Description of the third item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small">Action</button>
        </div>
      </li>
    </ul>
  </div>
</div>
  

Clickable footer

Title

Body
HTML
    <div class="card">
  <div class="card__header">
    <h3>Title</h3>
  </div>

  <div class="card__body">
    Body
  </div>

  <div class="card__footer card__footer--click">
    Load more
    <span class="icon-plus"></span>
  </div>
</div>
  

Multiple sections

Title

First section

Body of first section

Second section

Body of second section
HTML
    <div class="card">
  <div class="card__header">
    <h3>Title</h3>
    <button type="button" class="button">Action</button>
  </div>

  <section class="card__section">
    <div class="card__header">
      <h4>First section</h4>

      <button type="button" class="button button--small button--color-gray">Action</button>
    </div>

    <div class="card__body">Body of first section</div>
  </section>

  <section class="card__section">
    <div class="card__header">
      <h4>Second section</h4>

      <button type="button" class="button button--small button--color-gray">Action</button>
    </div>

    <div class="card__body">Body of second section</div>
  </section>

  <div class="card__footer">
    Footer
  </div>
</div>
  

Without gutter

Body
HTML
    <div class="card card--full">
  <div class="card__body">
    Body
  </div>
</div>
  

Usage

Attribute Description Possible values Type Required Default
full Set with .card--full full String - -
clickable footer Set with .card__footer--click class on .card__footer click String - -