Card

An all-around flexible and composable component

Colors Yes

Sizes No

Variables Yes

The card component comprises several elements that you can mix and match:

card: the main container
- card-header: a horizontal bar with a shadow
  - card-header-title: a left-aligned bold text
  - card-header-icon: a placeholder for an icon
- card-image: a fullwidth container for a responsive image
- card-content: a multi-purpose container for any other element
- card-footer: a horizontal list of controls
  - card-footer-item: a repeatable list item

You can center the card-header-title by appending the is-centered modifier.

Card

Package Elenore

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

        <div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Card
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <div class="tags has-addons">
        <span class="tag">Package</span>
        <span class="tag is-primary">Elenore</span>
      </div>
    </a>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>
      

New 1.3.5

To create a hover effect on the card, add the .is-hover class. This comes in handy when working with anchors and can be combined with the other card modifiers.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        <div class="card is-hover">
  <div class="card-header">
    <h3 class="card-header-title">
      Default
    </h3>
  </div>
  <div class="card-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
      

Colors #

You can change the background color of the card by using one of the 9 color modifiers:

is-primary
is-secondary
is-success
is-warning
is-danger
is-black
is-dark
is-light
is-white

Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. #Elenore

        <div class="card is-primary">
  <div class="card-header">
    <h3 class="card-header-title">
      Primary
    </h3>
  </div>
  <div class="card-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">#Elenore</a></p>
  </div>
</div>
      

Style #

To display an image inside a card without any spacing, add one of the following classes to the card-image element. Mind that you need to modify the source order accordingly.

You can also divide a card into header and footer — around the default body. Just add the .card-header or .card-footer class to a element inside the card.

Asuka Langley

@Asuka

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        <div class="card">
  <div class="card-image">
    <figure class="image">
      <img src="https://yellowdi.github.io/Elenore/images/media.png">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://yellowdi.github.io/Elenore/images/avatar.jpg">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">Asuka Langley</p>
        <p class="subtitle is-6">@Asuka</p>
      </div>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
      

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Elenore. Learn how.

Name	Default value
Name	Default value
`$card-color`	`$text`
`$card-background-color`	`$white`
`$card-shadow`	`0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)`
`$card-header-color`	`$text-strong`
`$card-header-shadow`	`0 1px 2px rgba($black, 0.1)`
`$card-header-weight`	`$weight-bold`
`$card-header-background-color`	`none`
`$card-content-background-color`	`none`
`$card-footer-border-top`	`1px solid $border`
`$card-footer-background-color`	`none`

This page is open source. View on GitHub