Grayshift’s cards provide a flexible and extensible content container with multiple variants and options.
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.
<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>
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 the grid, wrap cards in columns and rows as needed.
<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>
Use our handful of available sizing utilities to quickly set a card’s width.
<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>
Use custom CSS in your stylesheets or as inline styles to set a width.
<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>