Card

The card component is a versatile component designed to showcase content with an image, date, title, excerpt, and category tags. It supports variations like a horizontal layout and a logo card, providing flexibility in how you present information. The card component is smartly designed to render only the elements that have content defined. For example, if no image is provided, that section will be omitted, ensuring a clean and purposeful display on the front end.

Default

.bt1d-card

Cards will fill the width of the container inside.

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
  <figure class="bt1d-card__image" itemprop="image">
    <img src="https://breakthrought1d.design/wp-content/uploads/2024/07/HomeHero-scaled-1.jpg" alt="Beautiful mother and daughter having fun in bed.">
  </figure>

  <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi. Minim minim ipsum irure eu aliqua eiusmod proident consectetur.</p>
  </div>

  <div class="bt1d-card__categories" aria-label="categories">
    <span class="bt1d-card__category" itemprop="articleSection">Category</span>
  </div>
</article>

Default – No Image

.bt1d-card

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
 <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi. Minim minim ipsum irure eu aliqua eiusmod proident consectetur.</p>
  </div>

  <div class="bt1d-card__categories" aria-label="categories">
    <span class="bt1d-card__category" itemprop="articleSection">Category</span>
  </div>
</article>

Default – No Image & Category

.bt1d-card

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
 <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi. Minim minim ipsum irure eu aliqua eiusmod proident consectetur.</p>
  </div>"articleSection">Category</span>
  </div>
</article>

Default – No image and excerpt

.bt1d-card

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
 <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
  </div>

  <div class="bt1d-card__categories" aria-label="categories">
    <span class="bt1d-card__category" itemprop="articleSection">Category</span>
  </div>
</article>

Default – No image, excerpt, and category

.bt1d-card

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
 <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
  </div>
</article>

Horizontal Variant

.bt1d-card .bt1d-card--horizontal

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
  <figure class="bt1d-card__image" itemprop="image">
    <img src="https://breakthrought1d.design/wp-content/uploads/2024/07/HomeHero-scaled-1.jpg" alt="Beautiful mother and daughter having fun in bed.">
  </figure>

  <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi. Minim minim ipsum irure eu aliqua eiusmod proident consectetur.</p>
    <div class="bt1d-card__categories" aria-label="categories">
      <span class="bt1d-card__category" itemprop="articleSection">Category</span>
    </div>
  </div>
</article>

Horizontal Variant – No Image

.bt1d-card .bt1d-card--horizontal

<article class="bt1d-card" itemscope itemtype="https://schema.org/Article">
  <div class="bt1d-card__content">
    <time class="bt1d-card__date" aria-label="published date" itemprop="datePublished">14 September 2024</time>
    <a href="#" class="bt1d-card__link" aria-label="In-Home Test Kits Make Screening Convenient and Easy" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">In-Home Test Kits Make Screening Convenient and Easy</h5>
    </a>
    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi. Minim minim ipsum irure eu aliqua eiusmod proident consectetur.</p>
    <div class="bt1d-card__categories" aria-label="categories">
      <span class="bt1d-card__category" itemprop="articleSection">Category</span>
    </div>
  </div>
</article>

Logo Variant

.bt1d-card .bt1d-card--logo

<article class="bt1d-card bt1d-card--logo" itemscope itemtype="https://schema.org/Article">
  <figure class="card__image" itemprop="image">
    <img src="https://placehold.co/600x400/FFF/545454?text=LOGO" alt="Placeholder Logo 600x400">
  </figure>

  <div class="bt1d-card__content">
    <a href="#" class="bt1d-card__link" aria-label="Partner Name" itemprop="url">
      <h5 class="bt1d-card__title" itemprop="name">Partner Name</h5>
    </a>

    <p class="bt1d-card__excerpt" itemprop="description">Adipisicing eiusmod irure ex ut dolor eu ea dolor anim enim elit nisi.</p>
  </div>
</article>

Need Help?

If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.

get in touch