Card
Card component is for the Default theme usage only, yet if needs be it can be utilised by sub-themes. The grey & white colour scheme works for everything, buttons remain relevant to a particular sub-theme.
.card defines the component, with the #ebeff0 grey as the default background colour.
<aside class="card">
<h1 class="card-title">Card title</h1>
<div class="card-body">
<p>Description goes here</p>
<div>
<a href="#" class="btn btn-primary btn-md">Button</a>
</div>
</div>
</aside>
Full width Card with grey background (with greater side paddings)
To create greater side paddings use .card-full-width.
Small Card with white background (Hero and similar usage, hence limited width)
Use .card-small to constrain the width, when using it within Hero.
You can change the background colour to white by adding .card-white to aside.
For nesting Form within Card place Form's markup inside .card-body div.