Card

A flexible content container

Cards are a powerful flex based container with many use cases. An OrbitCSS Card is made up of the card block and the following elements:

  • card__header
  • card__image
  • card__content
  • card__footer


Catchy Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris..

by Rhys Hall September 29, 2019

<div class="card">
  <div class="card__header">
    <h4>Catchy Article Title</h4>
  </div>
  <div class="card__image">
    <svg width="100%" height="100%" viewBox="0 0 100 60" class="has-bg-light"></svg>
  </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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris..</p>
    <small class="has-text-light-grey">by Rhys Hall September 29, 2019</small>
  </div>
  <div class="card__footer has-end">
    <button class="button">Read more ></button>
  </div>
</div>
</> Show code
Copy

Closable

You can make a closable card using the button module's button--close element within the card__header element.



OrbitCSS Card

Click the close button to close me.

<div class="card">
  <div class="card__header">
    <h4>OrbitCSS Card</h4>
    <a href="#" class="button--close" onclick="this.closest('.card').remove(); return false;"></a>
  </div>
  <div class="card__content">
    <p>
      Click the close button to close me.
    </p>
  </div>
</div>
</> Show code
Copy

Flexible height

When using cards with the OrbitCSS grid, you’ll find that cards will grow to match their column parent's height. See the example below:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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



To work around this you can use the grid's is-flex-start modifier, which will give each column within the grid a flexible height. If you only want this applied to a single column/card then you can use the is-shrink modifier on the card element.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

<div class="grid is-flex-start">
  <div class="column">
    <div class="card is-shrink">
      <div class="card__content">
        <p>
          ...
        </p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card is-shrink">
      <div class="card__content">
        <p>
          ...
        </p>
      </div>
    </div>
  </div>
</div>
</> Show code
Copy

Examples

You’ll find a handful of examples below showing some common use cases for card elements.


Pricing cards

This is a basic example demonstrating how to make pricing cards with the OrbitCSS Grid and Card elements. View the full example here.

Personal

Free

$0

AUD / user / month


  • 5 users
  • 10GB Storage (shared)
  • Some other feature
Best Value

Basic

$10

AUD / user / month


  • 5 users
  • 10GB Storage (shared)
  • Some other feature
Corporate

Pro

$20

AUD / user / month


  • 5 users
  • 10GB Storage (shared)
  • Some other feature
<div class="grid has-text-center">
  <div class="column is-one-third">
    <div class="card">
      <div class="card__header is-vertically-centered">
        <h6>Personal</h6>
      </div>
      <div class="card__content">
        <h4>Free</h4>
        <h4>$0</h4>
        <p>AUD / user / month</p>
        <hr>
        <ul class="has-no-list-style">
          <li>5 users</li>
          <li>10GB Storage (shared)</li>
          <li>Some other feature</li>
        </ul>
      </div>
      <div class="card__footer">
        <button class="button is-full is-primary is-outline">Sign up for free</button>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card">
      <div class="card__header has-bg-primary has-text-white is-vertically-centered">
        <h6>Best Value</h6>
      </div>
      <div class="card__content">
        <h4>Basic</h4>
        <h4>$10</h4>
        <p>AUD / user / month</p>
        <hr>
        <ul class="has-no-list-style">
          <li>5 users</li>
          <li>10GB Storage (shared)</li>
          <li>Some other feature</li>
        </ul>
      </div>
      <div class="card__footer">
        <button class="button is-full is-primary">Sign up now</button>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card">
      <div class="card__header is-vertically-centered">
        <h6>Corporate</h6>
      </div>
      <div class="card__content">
        <h4>Pro</h4>
        <h4>$20</h4>
        <p>AUD / user / month</p>
        <hr>
        <ul class="has-no-list-style">
          <li>5 users</li>
          <li>10GB Storage (shared)</li>
          <li>Some other feature</li>
        </ul>
      </div>
      <div class="card__footer">
        <button class="button is-full is-primary is-outline">Sign up now</button>
      </div>
    </div>
  </div>
</div>
</> Show code
Copy


Blog post

This example is a quick and simple blog post card. View the full example here.


by Rhys Hall - September 29, 2019 2

Some wonderful photos of ducks I took at the park
<div class="card has-no-shadow">
  <a href="#" class="card__image">
    <svg width="100%" height="100%" viewBox="0 0 100 60" class="has-bg-light"></svg>
  </a>
  <div class="card__content">
    <p class="grid has-no-col-padding has-text-light-grey">
      <small class="column">
        by Rhys Hall - September 29, 2019
      </small>
      <small class="column is-shrink">
        <i class="far fa-comments"></i> 2
      </small>
    </p>
    <a href="#" class="is-hover-underline has-text-black">
      <h5>Some wonderful photos of ducks I took at the park</h5>
    </a>
  </div>
</div>
</> Show code
Copy

CSS variables

You can customize the card elements with the following CSS variables.

.card {
  --border-color: hsl(0deg, 0%, 86%, 0.36);
  --border-width: 1px;
  --border-radius: 0;
  --box-shadow: 0 0 3px 0 hsl(0deg, 0%, 4%, 0.1);
}

/* Card header */
.card__header {
  --background-color: hsl(0deg, 0%, 0%, 0.03);
  --font-color: var(--color-black);
  --padding: 0.625rem 1rem;
}

/* Card image */
.card__image {
  --padding: 0;
}

/* Card content */
.card__content {
  --padding: 1rem;
}

/* Card footer */
.card__footer {
  --padding: 0.35rem 1rem;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$card-border-colorcolorhsl(0deg, 0%, 86%, 0.36)
$card-border-widthunits1px
$card-shadowbox-shadow0 0 3px 0 hsl(0deg, 0%, 4%, 0.1)
$card-radiusunits0
$card-header-backgroundcolorhsl(0deg, 0%, 0%, 0.03)
$card-header-colorcolorhsl(0deg, 0%, 22%, 1)
$card-header-paddingpadding0.625rem 1rem
$card-content-paddingunits1rem
$card-footer-paddingpadding0.35rem 1rem