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

<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.

<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:

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.

<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.

<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.

<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.