Card

The card component follows this structure:

  • card the main container
    • card-header optional card header
      • card-actions
    • card-body container for any other element
    • card-footer horizontal list of controls
      • card-footer-item repeatable list item

Card name

Card stuff

<div class="card">
    <div class="card-header">
        <div class="card-actions">
            <button>
                <span class="icon">
                    <i class="fas fa-ellipsis-v"></i>
                </span>
            </button>
        </div>
    </div>

    <div class="card-body has-text-centered">
        <span class="icon is-large has-text-primary">
            <i class="fas fa-info-circle fa-3x"></i>
        </span>
        <h4 class="title is-5">Card name</h4>
        <p>Card stuff</p>
    </div>

    <div class="card-footer">
        <div class="card-footer-item">
            <button class="button is-outlined">Cancel</button>
        </div>
        <div class="card-footer-item">
            <button class="button">Accept</button>
        </div>
    </div>
</div>

Background image

Cards can have an image as a background filling the whole card, just follow this structure:

  • card has-image-bg the main container
    • card-image background image container
      • img
    • card-header optional card header
      • card-actions
    • card-content container with a translucent background
      • card-body container for any other element
      • card-footer horizontal list of controls
        • card-footer-item repeatable list item

Card content

Notice that card-body and card-footer are now wrapped by the card-content container.

Card name

Card stuff

<div class="card has-image-bg">
    <figure class="card-image">
        <img src="../assets/card-bg.jpg" alt="">
    </figure>
    <div class="card-header">
        <div class="card-actions">
            <button>
                <span class="icon"><i class="fas fa-ellipsis-v"></i></span>
            </button>
        </div>
    </div>
    <div class="card-content">
        <div class="card-body has-text-centered">
            <span class="icon is-large has-text-primary">
                <i class="fas fa-info-circle fa-3x"></i>
            </span>
            <h4 class="title is-5">Card name</h4>
            <p>Card stuff</p>
        </div>
        <div class="card-footer">
            <div class="card-footer-item">
                <button class="button is-outlined">Button</button>
            </div>
        </div>
    </div>
</div>

Variables

Name Type Value Computed value
$card-bg-color color $white
rgb(255, 255, 255)
$card-radius size 4px
$card-shadow shadow settings 0 1px 2px rgba(0, 0, 0, 0.1)
$card-header-padding size 10px
$card-body-padding size 25px 15px
$card-body-text-color color $darker-grey
rgb(85, 85, 85)
$card-footer-item-padding size 8px 10px
$card-footer-border-color color $grey-lighter
rgb(242, 242, 242)
$card-footer-min-height size 64px
$image-card-padding size 5px
$image-card-radius size $card-radius 4px
$image-card-content-bg-color color transparentize($white, .2)
$image-card-shadow shadow settings 0 1px 2px rgba(0, 0, 0, 0.1)
← Navbar →