Card

Displays information in a card style with different types of content and layouts.

Structure

• card
  • image
  • card-body
    • card-title
    • card-content
  • card-actions

Basic Usage

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

<div class="card" style="max-width:320px">
  <!--  Card Body  -->
  <div class="card-body">
    <div class="card-title">Card Title</div>
    <div class="card-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nostrum omnis laborum dolore accusamus.
      </p>
    </div>
  </div>

  <!--  Card Actions  -->
  <div class="card-actions">
    <button class="btn is-outlined">Cancelar</button>
    <button class="btn">Guardar</button>
  </div>
</div>

Image

You can add an image to the card using the img tag, positioning it at the beginning or end of the card.

Image Start

Preview

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Code

<div class="card" style="max-width:320px">
  <!--  Card Image  -->
  <figure class="image card__image is-16by9">
    <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
  </figure>

  <!--  Card Body  -->
  <div class="card-body">
    <div class="card-title">Card Title</div>
    <div class="card-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nostrum omnis laborum dolore accusamus.
      </p>
    </div>
  </div>

  <!--  Card Actions  -->
  <div class="card-actions">
    <button class="btn is-outlined">Cancelar</button>
    <button class="btn">Guardar</button>
  </div>
</div>

Image End

Preview

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Code

<div class="card" style="max-width:320px">
  <!--  Card Body  -->
  <div class="card-body">
    <div class="card-title">Card Title</div>
    <div class="card-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nostrum omnis laborum dolore accusamus.
      </p>
    </div>
  </div>
  <!--  Card Image  -->
  <figure class="image card__image is-16by9">
    <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
  </figure>
</div>

Elevation

You can set the elevation effect using the elevation-{number} class, where number is a value from 1 to 5.

Preview

Elevation 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Elevation 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Elevation 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Code

<div class="is-hstack">
  <!--  ################### Elevation 1 ###################  -->
  <div class="card elevation-1" style="max-width:320px">
    <!--  Card Image  -->
    <figure class="image card__image is-16by9">
      <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
    </figure>

    <!--  Card Body  -->
    <div class="card-body">
      <div class="card-title">Elevation 1</div>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          nostrum omnis laborum dolore accusamus.
        </p>
      </div>
    </div>

    <!--  Card Actions  -->
    <div class="card-actions">
      <button class="btn is-outlined">Cancelar</button>
      <button class="btn">Guardar</button>
    </div>
  </div>

  <!--  ################### Elevation 3 ###################  -->
  <div class="card elevation-3" style="max-width:320px">
    <!--  Card Image  -->
    <figure class="image card__image is-16by9">
      <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
    </figure>

    <!--  Card Body  -->
    <div class="card-body">
      <div class="card-title">Elevation 3</div>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          nostrum omnis laborum dolore accusamus.
        </p>
      </div>
    </div>

    <!--  Card Actions  -->
    <div class="card-actions">
      <button class="btn is-outlined">Cancelar</button>
      <button class="btn">Guardar</button>
    </div>
  </div>

  <!--  ################### Elevation 5 ###################  -->
  <div class="card elevation-5" style="max-width:320px">
    <!--  Card Image  -->
    <figure class="image card__image is-16by9">
      <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
    </figure>

    <!--  Card Body  -->
    <div class="card-body">
      <div class="card-title">Elevation 5</div>
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
          nostrum omnis laborum dolore accusamus.
        </p>
      </div>
    </div>

    <!--  Card Actions  -->
    <div class="card-actions">
      <button class="btn is-outlined">Cancelar</button>
      <button class="btn">Guardar</button>
    </div>
  </div>
</div>

Outlined

To use the outlined variant, use the is-outlined class.

Preview

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis nostrum omnis laborum dolore accusamus.

Code

<div class="card is-outlined" style="max-width:320px">
  <!--  Card Image  -->
  <figure class="image card__image is-16by9">
    <img src="/pucoui/img/pucoui-img-1-lg.jpeg" alt="Puco UI" />
  </figure>

  <!--  Card Body  -->
  <div class="card-body">
    <div class="card-title">Card Title</div>
    <div class="card-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nostrum omnis laborum dolore accusamus.
      </p>
    </div>
  </div>

  <!--  Card Actions  -->
  <div class="card-actions">
    <button class="btn is-outlined">Cancelar</button>
    <button class="btn">Guardar</button>
  </div>
</div>