Cards
View GuidelinesDefault Card
This is a simple card
Dashing Cards are used to contain and display any type of content.
This is an example of a simple card. Its little markup makes it very convenient to use.
<div class="card">
<div class="card--header">
<h3>This is a simple card</h3>
</div>
<div class="card--content">
<p class="remove-margin--top">Dashing Cards are used to contain and display any type of content.</p>
<p class="remove-margin--bottom">This is an example of a simple card. Its little markup makes it very convenient to use.</p>
</div>
</div>
Centered content in a card
This is a simple card
To center content within a card, apply the alignment utility class .center-align to a .card element. If you want more control, apply the utility class to the .card--header, .card--content, or .card--footer elements.
<div class="card center-align">
<div class="card--header">
<h3>This is a simple card</h3>
</div>
<div class="card--content">
<p>To center content within a card, apply the <a href="https://github.com/dashframework/dashing/blob/2b4f977910aa2cd9c54309d08aae915af283fda0/sass/modules/typography/_typography.scss#L19-L21">alignment utility class</a> <code class="example-text">.center-align</code> to a <code class="example-text">.card</code> element. If you want more control, apply the utility class to the <code class="example-text">.card--header</code>, <code class="example-text">.card--content</code>, or <code class="example-text">.card--footer</code> elements.</p>
</div>
<div class="card--footer">
<button class="button button--blue">Centered Button</button>
</div>
</div>
Separation within cards
Creating line separation with an <hr> and .has-border
Use the .has-border class on your .card--header or .card--footer element to create a line separation between content
Placing an <hr> within .card--header, card--content, or card--footer will allow you to separate content within your card, while still respecting your $grid-gutter.
Use the remove-margin utility classes to remove unnecessary margin in your paragraphs.
Use an <hr> outside of .card--header, card--content, or card--footer to span your <hr> edge to edge.
<div class="card">
<div class="card--header has-border">
<h3>Creating line separation with an <code class="example-text"><hr></code> and <code class="example-text">.has-border</code></h3>
</div>
<div class="card--content">
<p class="remove-margin--top">Use the <code class="example-text">.has-border</code> class on your <code class="example-text">.card--header</code> or <code class="example-text">.card--footer</code> element to create a line separation between content </p>
<hr>
<p>Placing an <code class="example-text"><hr></code> within <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> will allow you to separate content within your card, while still respecting your <code class="example-text">$grid-gutter</code>.</p>
<hr>
<p class="remove-margin--bottom">Use the <a href="https://github.com/dashframework/dashing/blob/v1.0.7/sass/base/utilities/_utilities.scss#L12-L16">remove-margin</a> utility classes to remove unnecessary margin in your paragraphs.</p>
</div>
<hr>
<div class="card--content">
<p class="remove-margin">Use an <code class="example-text"><hr></code> outside of <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> to span your <code class="example-text"><hr></code> edge to edge.</p>
</div>
<div class="card--footer has-border">
<button class="button button--primary">Button</button>
</div>
</div>
Selectable Card
This is a selectable card
This is a disabled selectable card
<!-- Add the .is-selectable class to make the card appear clickable -->
<div class="card is-selectable">
<div class="card--header">
<h3>This is a selectable card</h3>
</div>
<div class="card--footer">
<button class="button button--primary button--transparent">Click me</button>
</div>
</div>
<!-- Add the .is-disabled class to make the card appear faded -->
<div class="card is-selectable is-disabled">
<div class="card--header">
<h3>This is a disabled selectable card</h3>
</div>
<div class="card--footer">
<button class="button button--primary button--transparent">Can't click me</button>
</div>
</div>
Dashed Card
This is a dashed card
To use a dashed card, apply .card--dashed after .card.
<div class="card card--dashed">
<div class="card--header">
<h3>This is a dashed card</h3>
</div>
<div class="card--content">
<p class="remove-margin--top">To use a dashed card, apply <code class="example-text">.card--dashed</code> after <code class="example-text">.card</code>.</p>
</div>
</div>
Form Elements in a Card
This is a card with a form
<div class="card">
<div class="card--header">
<h3>This is a card with a form</h3>
</div>
<form>
<fieldset class="card--content">
<div class="row row--nested">
<div class="column column--full column--nested">
<label>Label</label>
<input type="text">
</div>
</div>
<div class="row row--nested">
<div class="column column--half column--nested">
<label>Label</label>
<input type="text">
</div>
<div class="column column--half column--nested">
<label>Label</label>
<input type="text">
</div>
</div>
<div class="row row--nested">
<div class="column column--half column--nested">
<label>Label</label>
<input type="text">
</div>
<div class="column column--half column--nested">
<label>Label</label>
<input type="text">
</div>
</div>
</fieldset>
<div class="card--footer">
<button class="button button--green">Submit</button>
<button class="button button--secondary button--transparent">Cancel</button>
</div>
</form>
</div>
Card List
<div class="card" style="overflow: hidden;" data-id="need">
<ul class="card--list is-selectable">
<li class="space-between"><span>Ryan Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Jill Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Jackson Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Emily Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
</ul>
</div>
Card List
<div class="card" style="overflow: hidden;" data-id="need">
<ul class="card--list is-selectable">
<li class="space-between"><span>Ryan Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Jill Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Jackson Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
<li class="space-between"><span>Emily Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li>
</ul>
</div>