Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap Documentation

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Sizing

Goodkit Exclusive

Easily change the size of the card component with sizing utlities.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor assumenda magni culpa! Qui, quisquam! Dolores quisquam totam vitae maiores. Sit quae incidunt quisquam. Ipsam blanditiis tempora accusantium nihil mollitia sapiente?
<div class="card card-sm">
  <div class="card-body">
    ...
  </div>
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores quidem quibusdam sequi, consequuntur, ex quis qui tenetur distinctio veniam autem nesciunt. Molestiae voluptatum cumque velit reiciendis repellendus ipsum neque vel.
<div class="card">
  <div class="card-body">
    ...
  </div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt excepturi atque rem at nisi. Reprehenderit dolorem magni, at fugit, sapiente aut et est molestias totam harum voluptates molestiae quos repellendus!
<div class="card card-lg">
  <div class="card-body">
    ...
  </div>
</div>

Stack

Goodkit Exclusive

Stacks cards as you scroll. We are using position: sticky; to achieve this behaviour. Please make sure to set html, body to overflow: visible; for pages where you plan to use this component, because it's set to hidden in Goodkit by default.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur quasi culpa inventore laboriosam excepturi vel temporibus quam dolore deserunt optio tempora, facere esse fugit sit cum neque reprehenderit numquam a.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur quasi culpa inventore laboriosam excepturi vel temporibus quam dolore deserunt optio tempora, facere esse fugit sit cum neque reprehenderit numquam a.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur quasi culpa inventore laboriosam excepturi vel temporibus quam dolore deserunt optio tempora, facere esse fugit sit cum neque reprehenderit numquam a.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur quasi culpa inventore laboriosam excepturi vel temporibus quam dolore deserunt optio tempora, facere esse fugit sit cum neque reprehenderit numquam a.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur quasi culpa inventore laboriosam excepturi vel temporibus quam dolore deserunt optio tempora, facere esse fugit sit cum neque reprehenderit numquam a.
<div class="card-stack">
  <div class="card-stack-item mb-9">
    <div class="card">...</div>
  </div>
  <div class="card-stack-item mb-9">
    <div class="card">...</div>
  </div>
  <div class="card-stack-item mb-0">
    <div class="card">...</div>
  </div>
</div>