Cards & Badges

How to use

<div class="ar-card">
  <figure class="ar-card-figure"><img src="photo.jpg" alt=""></figure>
  <div class="ar-card-body">
    <h3 class="ar-card-title">Title</h3>
    <p>Body text</p>
  </div>
</div>

Badges: <span class="ar-badge ar-badge-primary">new</span> (…-outline -neutral -sm -xs) · hover lift: ar-hover-shadow-xl

image

Card title

Card body with some description text and tags below.

tag Primary sm xs

Simple

Cards work without a figure too.

Neutral surface

Set the background with the ar-bg-base-200 utility.