Skip to main content

Cards

Cards are designed with various shades and shapes for different uses.

Default card​

Galaxies

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Read more
<div class="card">
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>

Card with image​

04/03/2023Category

Galaxies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis deserunt dolor id inventore.

Read mode
<div class="card">
  <div class="card-header">
    <img src="..." alt="" />
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>

Card with image and category​

Category

Galaxies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis deserunt dolor id inventore, minima nemo non provident.

Read mode
<div class="card">
  <div class="card-header has-category">
    <img src="..." alt="" />
    <figcaption class="card-category">...</figcaption>
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>
Category

Galaxies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis deserunt dolor id inventore, minima nemo non provident.

DeleteEdit
<div class="card">
  <div class="card-header">
    <img src="..." alt="" />
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
  </div>
  <div class="card-footer">
    <a href="#!" class="button button-danger-outline is-small">...</a>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>

Card with image content​

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Category

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<!-- without category -->
<div class="card card-image">
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
  </div>
</div>

<!-- with category -->
<div class="card card-image">
  <span class="card-category">...</span>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
  </div>
</div>

Card with space in borders​

Category

Galaxies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis deserunt dolor id inventore, minima nemo non provident.

Read mode
<div class="card b-space">
  <div class="card-header has-category">
    <img src="..." alt="" />
    <figcaption class="card-category">...</figcaption>
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>

Horizontal card​

Galaxies

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut corporis deserunt dolor id inventore, minima nemo non provident.

Read mode
<div class="card b-space -even">
  <div class="card-header">
    <img src="..." alt="" />
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
    <a href="#!" class="button button-primary is-small">...</a>
  </div>
</div>