Unigrid

CSS Framework

Cards

Versatile card components with image, body, footer, and multiple style variants including dark, bordered, flat, horizontal, and accent colors.

Default Card

Basic card

Card image

Card Title

Subtitle text

This is the card body text with a brief description of the card content.

Learn More 
<div class="ug-card" style="max-width:320px">
  <div class="ug-card__image">
    <img src="https://placehold.co/640x360/e8e5e0/666?text=Image" alt="Card image" />
  </div>
  <div class="ug-card__body">
    <h3 class="ug-card__title">Card Title</h3>
    <p class="ug-card__subtitle">Subtitle text</p>
    <p class="ug-card__text">This is the card body text with a brief description of the card content.</p>
  </div>
  <div class="ug-card__footer">
    <a class="ug-btn ug-btn--sm" href="#">Learn More</a>
  </div>
</div>

Dark Card

Dark variant

Card image

Dark Card

Dark themed subtitle

Dark cards invert the color scheme for use on light backgrounds or dramatic layouts.

<div class="ug-card ug-card--dark" style="max-width:320px">
  <div class="ug-card__image">
    <img src="https://placehold.co/640x360/333/999?text=Image" alt="Card image" />
  </div>
  <div class="ug-card__body">
    <h3 class="ug-card__title">Dark Card</h3>
    <p class="ug-card__subtitle">Dark themed subtitle</p>
    <p class="ug-card__text">Dark cards invert the color scheme for use on light backgrounds or dramatic layouts.</p>
  </div>
</div>

Bordered Card

Bordered variant

Bordered Card

A card with a visible border and no shadow, for a more understated appearance.

<div class="ug-card ug-card--bordered" style="max-width:320px">
  <div class="ug-card__body">
    <h3 class="ug-card__title">Bordered Card</h3>
    <p class="ug-card__text">A card with a visible border and no shadow, for a more understated appearance.</p>
  </div>
</div>

Flat Card

Flat variant

Flat Card

No shadow or border. Useful when the card sits on a colored background or inside another container.

<div class="ug-card ug-card--flat" style="max-width:320px">
  <div class="ug-card__body">
    <h3 class="ug-card__title">Flat Card</h3>
    <p class="ug-card__text">No shadow or border. Useful when the card sits on a colored background or inside another container.</p>
  </div>
</div>

Horizontal Card

Horizontal layout

Card image

Horizontal Card

Image and content sit side by side. Stacks vertically on small screens.

<div class="ug-card ug-card--horizontal" style="max-width:600px">
  <div class="ug-card__image">
    <img src="https://placehold.co/300x200/e8e5e0/666?text=Image" alt="Card image" />
  </div>
  <div class="ug-card__body">
    <h3 class="ug-card__title">Horizontal Card</h3>
    <p class="ug-card__text">Image and content sit side by side. Stacks vertically on small screens.</p>
  </div>
</div>

Accent Cards

Color accent variants

Red Accent

Top border accent in NPS red.

Brown Accent

Top border accent in NPS brown.

Green Accent

Top border accent in NPS green.

Blue Accent

Top border accent in NPS blue.

<div style="display:flex;gap:1rem;flex-wrap:wrap">
  <div class="ug-card ug-card--accent-red" style="max-width:220px">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Red Accent</h3>
      <p class="ug-card__text">Top border accent in NPS red.</p>
    </div>
  </div>
  <div class="ug-card ug-card--accent-brown" style="max-width:220px">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Brown Accent</h3>
      <p class="ug-card__text">Top border accent in NPS brown.</p>
    </div>
  </div>
  <div class="ug-card ug-card--accent-green" style="max-width:220px">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Green Accent</h3>
      <p class="ug-card__text">Top border accent in NPS green.</p>
    </div>
  </div>
  <div class="ug-card ug-card--accent-blue" style="max-width:220px">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Blue Accent</h3>
      <p class="ug-card__text">Top border accent in NPS blue.</p>
    </div>
  </div>
</div>

Image Aspect Ratios

Image variants

Square

Square

Landscape

Landscape

DIN ratio

DIN

<div style="display:flex;gap:1rem;flex-wrap:wrap">
  <div class="ug-card" style="max-width:200px">
    <div class="ug-card__image ug-card__image--square">
      <img src="https://placehold.co/400x400/e8e5e0/666?text=Square" alt="Square" />
    </div>
    <div class="ug-card__body">
      <h3 class="ug-card__title">Square</h3>
    </div>
  </div>
  <div class="ug-card" style="max-width:200px">
    <div class="ug-card__image ug-card__image--landscape">
      <img src="https://placehold.co/400x300/e8e5e0/666?text=Landscape" alt="Landscape" />
    </div>
    <div class="ug-card__body">
      <h3 class="ug-card__title">Landscape</h3>
    </div>
  </div>
  <div class="ug-card" style="max-width:200px">
    <div class="ug-card__image ug-card__image--din">
      <img src="https://placehold.co/300x424/e8e5e0/666?text=DIN" alt="DIN ratio" />
    </div>
    <div class="ug-card__body">
      <h3 class="ug-card__title">DIN</h3>
    </div>
  </div>
</div>

Card Grid

Card grid layouts

Card One

Three-column card grid layout.

Card Two

Cards automatically fill the grid.

Card Three

Responsive on smaller screens.

<div class="ug-card-grid ug-card-grid--3">
  <div class="ug-card">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Card One</h3>
      <p class="ug-card__text">Three-column card grid layout.</p>
    </div>
  </div>
  <div class="ug-card">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Card Two</h3>
      <p class="ug-card__text">Cards automatically fill the grid.</p>
    </div>
  </div>
  <div class="ug-card">
    <div class="ug-card__body">
      <h3 class="ug-card__title">Card Three</h3>
      <p class="ug-card__text">Responsive on smaller screens.</p>
    </div>
  </div>
</div>

Class Reference

Class Description
.ug-card Card container
.ug-card__image Card image container
.ug-card__image--square Square aspect ratio image
.ug-card__image--landscape Landscape aspect ratio image
.ug-card__image--din DIN (1:1.414) aspect ratio image
.ug-card__body Card content area
.ug-card__title Card heading
.ug-card__subtitle Card subtitle
.ug-card__text Card body text
.ug-card__footer Card footer area
.ug-card__actions Card action buttons container
.ug-card--dark Dark background variant
.ug-card--bordered Border instead of shadow
.ug-card--flat No shadow or border
.ug-card--horizontal Side-by-side image and content
.ug-card--accent-red|brown|green|blue Colored top border accent
.ug-card-grid Auto-grid container for cards
.ug-card-grid--2|3|4 Column count variants