Cards

Flexible content containers with multiple variants and options.

zenCSS provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards are typically used in combination with the Smart-Align System, meaning that they are defined on a column to work properly.

Large Image Card

Card with Full Bleed Header Image and Text

A beautiful card for your website

Lorem ipsum dolor sit amet consec tetur, adipis cing elit. Amet incidunt veritatis dolorum sed alias et nulla illo sapiente repellendus ducimus.

Code Example Shortcut: z-card-full-bleed

<z-col class="card p-0 theme-light">
  <img src="your-image.jpg" class="square" alt="">
  <h4 class="h6 headline pt-2 pl-3 pr-3">A beautiful card for your website</h4>
  <p class="p-3 pt-0">Lorem ipsum dolor...
  </p>
</z-col>

Side Image Card

Card with Full Bleed Side Image and Text

A beautiful card for your website

Lorem ipsum dolor sit amet consec tetur, adipis cing elit. Amet incidunt.

Code Example Shortcut: z-card-left-img

<z-container class="single page-section">
  <z-row class="card theme-light p-0">
    <z-col class="p-0 m-0 d-flex align-items-center">
      <img src="docs/images/placeholder/placeholders/unsplash/headshots/150x150/4.jpg" class="w-100 side-card" alt="">
      <div class="ml-3 p-2">
        <p class="text-bold headline">A beautiful card...</p>
        <p class="text-sm">Lorem ipsum dolor ...</p>
      </div>
    </z-col>
  </z-row>
</z-container>

Full Image Card

Card with Background Image, overlay & Text

NATURE

Best places to visit this summer

Learn More

Code Example Shortcut: z-card-full-img

<z-col class="card theme-dark gap-3 h-300  overflow-hidden">
    <div class="overlay"></div> 
    <img src="image.jpg" class="bg-img"  alt="">
    <span class="eyebrow">NATURE</span>
    <h4 class="headline text-balance">Best places to visit this summer</h4>
    <a href="" class="btn btn-light w-150 card-bottom">Learn More</a>
</z-col>

Hover/Pan Image Card

Card as interactive element with Background Image, overlay & Text. use card-hover or card-pan on the column.

NATURE

Best places to visit this summer

Code Example Shortcut: z-card-hover-pan

<z-container>
  <z-row>
    <a href=""><z-col class="card theme-dark gap-3 h-300 overflow-hidden card-hover">
      <div class="overlay"></div>
      <img src="../../docs/images/placeholder/16x9/neom.jpg" class="bg-img" alt="">
      <span class="eyebrow text-yellow-light">NATURE</span>
      <h4 class="headline text-balance">Best places to visit this summer</h4>
      <button class="btn-light w-150 card-bottom">Learn More</button>
    </z-col></a>
  </z-row>
</z-container>

Image Card

Card with Top Image and Text

A title goes here

Fugit ratione natus minus magnam magni labore voluptatibus impedit sit voluptatum nobis?

Code Example Shortcut: z-card-img

<z-col class="card theme-dark">
    <img src="16x9.jpg" class="square" alt="">
    <h4 class="headline down-7">A title...</h4>
    <p class="down-5">Fugit ratione natus... </p>
</z-col>

Text Wrap Card

Card with image and wrapping text

A title goes here

Lorem ipsum dolor sit amet sectetur adipisicing elit. Delectus officia eli gendi iste nihil Impedit nam laborum eligendi.

Voluptas velit molestias, illum fugiat eos labore incidunt quis, mollitia deserunt quasi maiores ullam.

Code Example Shortcut: z-card-text-wrap

<z-col class="card theme-light">
  <div>
    <img src="your-image.jpg" class="img-left w-75 h-75 img-round" alt="">
    <h4 class="headline mb-1">A title...</h4>
    <p>Lorem ipsum dolor sit amet... </p>
  </div>
</z-col>

Icon Card

Card with Icon and Text

A title goes here

Fugit ratione natus minus magnam magni labore voluptatibus impedit sit voluptatum nobis?

Code Example Shortcut: z-card-icon

<z-container>
  <z-row>
    <z-col class="card theme-light center">
      <div class="center-me icon-circle bg-grey-1-dark mt-1 mb-1"><i class="zenicon-ind-in-page text-lg"></i>
      </div>
      <h4 class="headline">A title goes here</h4>
      <p>Fugit ratione natus...</p>
    </z-col>
  </z-row>
</z-container>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.