Container with content and action(s) about a single subject.
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card |
.card |
add padding to content |
.c-card--plain |
.card--plain |
add background* |
.c-card--plain-hr-top |
.card--plain-hr-top |
prepend an <hr> |
.c-card--plain-hr-bottom |
.card--plain-hr-bottom |
append an <hr> |
.c-card--standard |
.card--standard |
add background + border* |
* Colors depend on card context/parent.
To support images at different positions:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--image-... |
.card--image-... |
position a single image |
.c-card--image-top |
.card--image-top |
position image to top |
.c-card--image-bottom |
.card--image-bottom |
position image to bottom |
.c-card--image-left |
.card--image-left |
position image to left |
.c-card--image-right |
.card--image-right |
position image to right |
Backup classes if c-card--standard automatic styles fail:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--standard-1 |
.card--standard-1 |
teal border, gray background |
.c-card--standard-2 |
.card--standard-2 |
teal border, white background |
.c-card--standard-3 |
.card--standard-3 |
brown border, white background |
<h2>Table of Contents</h2>
<nav class="c-nav">
<ul>
<li><a href="#section--null">Section (Default)</a></li>
<li><a href="#section--light">Section - Light</a></li>
<li><a href="#section--muted">Section - Muted</a></li>
<li><a href="#section--dark">Section - Dark</a></li>
<li><a href="#col--muted">Column - Muted</a></li>
<li><a href="#col--dark">Column - Dark</a></li>
</ul>
</nav>
<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
<section class="o-section o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</section>
<hr />
<h2 id="section--light">Section - Light</h2>
<section class="o-section o-section--style-light o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</section>
<hr />
<h2 id="section--muted">Section - Muted</h2>
<section class="o-section o-section--style-muted o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</section>
<hr />
<h2 id="section--dark">Section - Dark</h2>
<section class="o-section o-section--style-dark o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</section>
<hr />
<h2 id="col--muted">Column - Muted</h2>
<div class="col col-muted o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</div>
<h2 id="col--dark">Column - Dark</h2>
<div class="col col-dark o-grid o-grid--col-min-width">
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
<a href="#" class="c-button c-button--primary">Action</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action</a>
<a href="#" class="c-button c-button--primary">
<i class="icon icon-user">></i>
Action + Icon
</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
<li><a href="#">List Item A</a></li>
<li><a href="#">List Item B</a></li>
<li><a href="#">List Item C</a></li>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If actions are wrapped in a <kbd><p></kbd> tag, automatic layout is abandoned.</p>
<p>
<a href="#"><i class="icon icon-push-left">></i> Learn less</a>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
<p>A regular paragraph with <a href="#">a link</a>
and <a href="#">another link</a> before the end, should not be affected.</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap link ("Learn more") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
<p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>If you wrap actions ("Action N") in a <kbd><p></kbd> tag, then spacing will be wrong.*</p>
<p>
<a href="#" class="c-button c-button--primary">Action 1</a>
<a href="#" class="c-button c-button--primary">Action 2</a>
</p>
<a href="#"><i class="icon icon-push-right">></i> Learn more</a>
</article>
<p style="grid-column: 1/-1;">* Wrapping in a <kbd><p></kbd> tag was a fix in early 2023-01, but is now non-standard.</p>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<div class="o-grid o-grid--col-min-width">
<article class="c-card">
<h3>Card - Default (Transparent)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
</div>
</article>
<article class="c-card c-card--plain">
<h3>Card - Plain</h3>
<p>Standard card and its explicit variations.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.
</span>
</p>
<div class="o-grid o-grid--col-min-width">
<article class="c-card c-card--standard">
<h3>Card - Standard</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
</article>
<article class="c-card c-card--standard-1">
<h3>Card - Standard 1</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-2">
<h3>Card - Standard 2</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
<article class="c-card c-card--standard-3">
<h3>Card - Standard 3</h3>
<p>This is a backup variant.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
Only use if <code>c-card--standard</code> fails.
</span>
</p>
</article>
</div>
</article>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To make a card with a grid inside span all columns */
.o-section > .c-card:has(.o-grid) {
grid-column: 1/-1
}
/* To prevent cards from stretching to match grid's equal row height */
.o-grid--col-min-width {
grid-auto-rows: unset;
}
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* Rid margin-bottom on last section */
.o-section>:last-child {
margin-bottom: var(--global-space--bootstrap-gap);
}
/* To make a title inside a section… */
.o-section > h2 {
/* …have "better" gap above and below */
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* create a two column grid (cleaner look) */
.c-card-list {
grid-template-columns: 1fr 1fr;
}
/* To make a title inside a card list… */
.c-card-list > h3 {
/* …span all columns */
grid-column: 1/-1;
/* …have "better" gap above and below */
margin-top: 40px;
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* So hover outline shrink-wraps to card */
.c-card-list > .c-card {
height: min-content;
}
/* To show a card must not be used (even if it works) */
.c-card.demo-disabled * {
opacity: 0.5;
}
.c-card.demo-disabled { position: relative; }
.c-card.demo-disabled::after {
content: "Card like this must not be linked. Design does not approve of such a configuration.";
padding: 1rem;
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: black;
color: white;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadCMS": true,
"📝 shouldLoadCMS": "this pattern is not intended nor expected for use beyond CMS",
"shouldLoadBootstrap": true
}