Figures

On this page

# Intro

Figures are a way of diplaying content and media inside a uniform container and are classless by default. Figures take up the full width of the parent and should be paired with the grid system.

Placeholder
Figure Caption

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
Figure Caption
Placeholder
<div class="row">
	<div class="column -md-6">
		<figure>
			<img src="/images/placeholder.png" alt="Placeholder">
			<figcaption>Figure Caption</figcaption>
			<div class="content">
				<h3 class="title">Title</h3>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
			</div>
		</figure>
	</div>
</div>

# Headers

Figures can have header elements.

HEADER

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus. 
<figure>
	<header>
		HEADER
	</header>
	<div class="content">
		...
	</div>
</figure>

# Footers

Figures can have footer elements.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
FOOTER 
<figure>
	<div class="content">
		...
	</div>
	<footer>
		FOOTER
	</footer>
</figure>

# Actions

Figures can have an actions classed element added to create flexed and bordered anchors or button groups.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
<figure>
	<div class="content">
		<h3 class="title">Title</h3>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
	</div>
	<div class="action">
		<a href="">Action</a>
		<a href="">Action</a>
		<button class="primary">Action</button>
	</div>
</figure>

# Horizontal

Figures with the -horizontal modifier can use the grid system inside to change the layout of the card. Margins for rows and paddings for columns will be removed. Columns will be flexed with flex-direction: column;. Images will use object-fit: cover;.

Placeholder
Figure Caption

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Placeholder
Figure Caption
...
<figure class="-horizontal">
	<div class="row">
		<div class="column -12 -xl-6">
			<img src="/images/placeholder.png" alt="Placeholder">
			<figcaption>Figure Caption</figcaption>
		</div>
		<div class="column -12 -xl-6">
			<div class="content">
				<h3 class="title">Title</h3>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
			</div>
		</div>
	</div>
</figure>
...
<figure class="-horizontal">
	<div class="row">
		<div class="column -md-6">
			<div class="content">
				<h3 class="title">Title</h3>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
			</div>
		</div>
		<div class="column -md-6">
			<img src="/images/placeholder.png" alt="Placeholder">
			<figcaption>Figure Caption</figcaption>
		</div>
	</div>
</figure>
...

# Colors

Figures have color modifiers available with -primary, -success, -warning, -danger, -dark, and -light.

PRIMARY

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
SUCCESS

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
WARNING

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
DANGER

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
DARK

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
LIGHT

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
<figure class="-primary">
	<header>
		PRIMARY
	</header>
	<div class="content">
		...
	</div>
	<div class="actions">
		...
		<button class="-success">Action</button>
	</div>
</figure>

# Outline

Figures can be outlined using the -outline modifier. Backgrounds will be transparent. The -light modifier should only be used in the dark theme or inside darker elements.

DEFAULT

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
PRIMARY

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
SUCCESS

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
WARNING

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
DANGER

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
DARK

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
LIGHT

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus massa eu suscipit maximus.
ActionAction
...
<figure class="-outline">
	<header>
		DEFAULT
	</header>
	<div class="content">
		...
	</div>
	<div class="actions">
		...
		<button>Action</button>
	</div>
</figure>
...
<figure class="-primary -outline">
	<header>
		PRIMARY
	</header>
	<div class="content">
		...
	</div>
	<div class="actions">
		...
		<button class="-success">Action</button>
	</div>
</figure>
...