Cards

Grayshift’s cards provide a flexible and extensible content container with multiple variants and options.

Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. They offer easy alignment and mix well with other Grayshift components. They have no margin by default, so use spacing utilities as needed.

Card title

The quick brown fox jumps over the lazy dog.

Go somewhere

<div class="card p-0" style="max-width: 348px;">
  <img class="w-100 rounded-top" src="..." alt="...">
  <div class="p-5">
    <h3 class="mb-3" style="font-size: 1.125rem;">Card title</h3>
    <p class="mb-5">The quick brown fox jumps over the lazy dog.</p>
    <a class="btn btn-lg btn-primary w-100" href="#">Go somewhere</a>
  </div>
</div>

Sizes

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, or utilities.

Using grid markup

Using the grid, wrap cards in columns and rows as needed.

Card title

The quick brown fox jumps over the lazy dog.

Go somewhere

Card title

The quick brown fox jumps over the lazy dog.

Go somewhere

<div class="row">
  <div class="col-md-6">
    <div class="card">
      <h4 class="mb-3" style="font-size: 1.125rem;">Card title</h4>
      <p class="mb-5">The quick brown fox jumps over the lazy dog.</p>
      <a class="btn btn-lg btn-primary w-100" href="#">Go somewhere</a>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <h4 class="mb-3" style="font-size: 1.125rem;">Card title</h4>
      <p class="mb-5">The quick brown fox jumps over the lazy dog.</p>
      <a class="btn btn-lg btn-primary w-100" href="#">Go somewhere</a>
    </div>
  </div>
</div>

Using utilities

Use our handful of available sizing utilities to quickly set a card’s width.

Card title

The quick brown fox jumps over the lazy dog.

Go somewhere

<div class="card w-75">
  <h4 class="mb-3" style="font-size: 1.125rem;">Card title</h4>
  <p class="mb-5">The quick brown fox jumps over the lazy dog.</p>
  <a class="btn btn-lg btn-primary w-100" href="#">Go somewhere</a>
</div>

Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Card title

The quick brown fox jumps over the lazy dog.

Go somewhere

<div class="card" style="max-width: 348px;">
  <h4 class="mb-3" style="font-size: 1.125rem;">Card title</h4>
  <p class="mb-5">The quick brown fox jumps over the lazy dog.</p>
  <a class="btn btn-lg btn-primary w-100" href="#">Go somewhere</a>
</div>