Cards
Useful for displaying a heading, content, and call-to-action in a box. Optionally supports a label, and two different sized icons. Use with the Grid for positioning.
Cards can also use flexbox so that they all occupy the same vertical space. They must be wrapped by the .Card__wrapper class to flex correctly.
Card
<div class="Card g-1_3">
<h4 class="Card__heading"><strong>Whatever</strong></h4>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button">Go!</a>
</div>Card With Icon
<div class="Card g-1_3">
<svg class="Icon Icon--size-1 Card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"></path></svg>
<h3 class="Card__heading">Whatever</h3>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button Button--text">Go!</a>
</div>Card With Large Icon
<div class="Card g-1_3">
<img src="src/image.svg" class="Card__large-icon" />
<label class="Card__super">Superscript</label>
<h3 class="Card__heading">Whatever</h3>
<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="Button">Go!</a>
</div>Rating Card
9.9
Tech Support
9.9
Tech Support
9.9
Tech Support
9.9
Tech Support
<div class="Card Card__number g-1_4">
<h1 class="Card__heading">9.9</h1>
<hr>
<p class="Card__content">Tech Support</p>
</div>Featured Card
Featured
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a mauris in mauris maximus rhoncus vitae sed erat. Maecenas tristique purus nisl, ac ornare odio ultrices sit amet. Suspendisse iaculis sem et nibh condimentum, nec sollicitudin ipsum vehicula. Duis porta vitae tortor vel consequat. Phasellus posuere.
Go!Featured
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a mauris in mauris maximus rhoncus vitae sed erat. Maecenas tristique purus nisl, ac ornare odio ultrices sit amet. Suspendisse iaculis sem et nibh condimentum, nec sollicitudin ipsum vehicula. Duis porta vitae tortor vel consequat. Phasellus posuere.
Go!<div class="Card Card__featured g-1_2">
<h4 class="Card__heading"><strong>Header</strong></h4>
<p class="Card__content">Content</p>
<a href="#" class="Button Button--primary">Button</a>
</div>Plan Card
<div class="Card Card__featured g-1_2">
<h4 class="Card__heading"><strong>Header</strong></h4>
<p class="Card__content">Content</p>
<a href="#" class="Button Button--primary">Button</a>
</div>Extended Plan Card
Dedicated Hosting
The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.
Starting at just
$169/mo
- List Item (Double Spaced)
- List Item (Double Spaced)
- List Item (Double Spaced)
Dedicated Hosting
The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.
Starting at just
$169/mo
- List Item (Double Spaced)
- List Item (Double Spaced)
- List Item (Double Spaced)
Dedicated Hosting
The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.
Starting at just
$169/mo
- List Item (Double Spaced)
- List Item (Double Spaced)
- List Item (Double Spaced)