---

layout: layout-basic.njk

title: All components

permalink: /components/index.html

templateEngineOverride: njk

---

<header class="band">

<hgroup>

<h1>Components</h1>

<h2>Overview</h2>

</hgroup>

<p>

Components are interactive building blocks of our design system.

Each component was created to meet a specific UI and accessibility need.

Components should be used harmoniously together in the same space to create more intuitive user experiences.

</p>

<section id="component-list" class="band">

{%- for element in elements -%}

{%- if element.docsTemplatePath -%}

<div class="component-preview">

<div class="component-preview--container">

{%- if env.ELEVENTY_ENV == "prod" -%}

<a href="{{ ('/components/'+ element.slug +'/') | url }}" aria-label="{{ element.title }}">

<div class="preview-image" style="background-image: url({{ ('/components/'+ element.slug +'/docs/screenshot.png') | url }});"></div>

</a>

{%- else -%}

<div class="preview-image" style="background-image: url({{ ('/components/'+ element.slug +'/docs/screenshot.png') | url }});"></div>

<div class="overlay">

<a class="cta secondary wind" href="{{ ('/components/'+ element.slug +'/demo/') | url }}">Demo</a>

</div>

{%- endif -%}

</div>

<h3>

<a href="{{ ('/components/'+ element.slug +'/') | url }}">{{ element.title }}</a>

</h3>

{% renderTemplate "njk,md", element=element %}{{ element.summary }}{% endrenderTemplate %}

{%- if env.ELEVENTY_ENV != "prod" -%}

<a class="cta" href="{{ ('/components/'+ element.slug +'/') | url }}">Component overview</a>

{%- endif -%}

</div>

{%- endif -%}

{%- endfor -%}

#component-list {

display: grid;

gap: 1rem;

margin: 0;

}

@media (min-width: 800px) {

#component-list {

grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

}

}