Cards - Wilout UI

Basic Card

Card Title

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

Go somewhere

<div class="ui-card">
  <div class="ui-card__body">
    <h5 class="ui-card__title">Card Title</h5>
    <p class="ui-card__text">Some quick example text to build on the card title.</p>
    <a href="#" class="ui-btn ui-btn--primary">Go somewhere</a>
  </div>
</div>

Card with Header & Footer

This is a card with a header and footer.

<div class="ui-card">
  <div class="ui-card__header">
    <h5 class="ui-card__title">Featured</h5>
  </div>
  <div class="ui-card__body">
    <p class="ui-card__text">This is a card with a header and footer.</p>
  </div>
  <div class="ui-card__footer">
    <button class="ui-btn ui-btn--primary">Action</button>
    <button class="ui-btn ui-btn--secondary">Cancel</button>
  </div>
</div>

Card with Image

A card with an image at the top.

<div class="ui-card">
  <img src="image.jpg" class="ui-card__image" alt="Card image">
  <div class="ui-card__body">
    <h5 class="ui-card__title">Card with Image</h5>
    <p class="ui-card__text">A card with an image at the top.</p>
  </div>
</div>

Card Grid

Card 1

Content for the first card.

Card 2

Content for the second card.

Card 3

Content for the third card.

<div class="ui-row ui-row-gap-4">
  <div class="ui-col-12 ui-col-md-4">
    <div class="ui-card">
      <div class="ui-card__body">
        <h5 class="ui-card__title">Card 1</h5>
        <p class="ui-card__text">Content for the first card.</p>
      </div>
    </div>
  </div>
  <div class="ui-col-12 ui-col-md-4">
    <div class="ui-card">...</div>
  </div>
  <div class="ui-col-12 ui-col-md-4">
    <div class="ui-card">...</div>
  </div>
</div>

Bordered Card

This card has a visible border.

<div class="ui-card ui-card--bordered">
  <div class="ui-card__body">
    <h5 class="ui-card__title">Bordered Card</h5>
    <p class="ui-card__text">This card has a visible border.</p>
  </div>
</div>

Clickable Card

This entire card is clickable. Hover to see the effect.

<a href="#" class="ui-card ui-card--hover">
  <div class="ui-card__body">
    <h5 class="ui-card__title">Clickable Card</h5>
    <p class="ui-card__text">This entire card is clickable.</p>
  </div>
</a>

CSS Classes Reference

Class	Description
`.ui-card`	Base card class
`.ui-card__header`	Card header section
`.ui-card__body`	Main card content
`.ui-card__footer`	Card footer section
`.ui-card__title`	Card title styling
`.ui-card__text`	Card text styling
`.ui-card__image`	Card image (top)
`.ui-card--bordered`	Adds visible border
`.ui-card--hover`	Hover effect for clickable cards