Card

Use the Card component to encapsulate and highlight key information among prose. To make the whole card clickable apply class="ds-card-link" to the principle link inside the card. Other, supplementary links are raised above this clickable area to still be operable.

Light theme

Card

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem aliquid provident aspernatur molestiae, totam voluptatibus fugit perspiciatis quo corrupti esse, voluptates, tenetur explicabo. Blanditiis provident dolor molestias hic. Aut!

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

Card

The .ds-card-body class extends the .ds-card-smaller class from Stack to space the elements inside it.

<div class="ds-card">
  <div class="ds-card-body">
    <h3><a class="ds-card-link" href="#">Card</a></h3>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste rem <a href="#other-link">aliquid provident</a> aspernatur molestiae, totam voluptatibus fugit perspiciatis quo corrupti esse, voluptates, tenetur explicabo. Blanditiis provident dolor molestias hic. Aut!
    </p>
  </div>
</div>

Image cards

Insert an element with class="ds-card-image" enclosing an image above the class="ds-card-body" element. Regardless of the aspect ratio of the supplied image, it will be displayed at 16:9. The object-fit: cover declaration ensures the image is cropped rather than squashed within the space.

Light theme

Card with image

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.