Card

Muestra información con estilo de tarjetas con diferentes tipos de contenido y diseños.

Estructura

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

Uso básico

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>

Imágen

Puedes agregar una imagen a la tarjeta utilizando la etiqueta img posicionandola al inicio o al final de la tarjeta

Imágen inicio

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>

Imágen final

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>

Elevación

Puedes configurar el efecto de elevación usando la clase elevation-{number}, donde number es un valor de 1 al 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>

Con borde

Para usar la variante con bordes usar la clase is-outlined

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>