--- layout: simple title: Components section: Guide --- This section provides styles for different types of layouts. * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Panel Panel is a quick, easy way to display content with a title. {% snippet html %}

Title of Panel

This is the content section.

Things to consider:

When to use a panel
Why you need a panel
When not to use a panel

{% endsnippet %}
## Buttons {% snippet html %}

{% endsnippet %} ## Card Card for use in card lists. The below is an example card with titles and flag. {% snippet html %}

1.2.3.4.5 A really long title here will wrap to the next line with an indent so it is easier to read

{% endsnippet %} ### Status Bar {% snippet html %}

{% endsnippet %} ### Status Circle {% snippet html %}

Unknown/No Status

Not Started

In Progress

On Hold

Overdue

Complete

{% endsnippet %} ## Drop-down list Used for drop-down lists
### Closed {% snippet html %}

Item 1

{% endsnippet %} ### Open {% snippet html %} {% endsnippet %}
## Loading Indicator Used while waiting for system response
{% snippet html %}

{% endsnippet %} ## Side-Bar Used for side bars {% snippet html %}

Aliqua stumptown accusamus trust fund swag kogi. Lomo artisan normcore shabby chic ugh irure sriracha. Whatever consequat cillum id 8-bit. Four dollar toast meh qui, meditation adipisicing occaecat deserunt elit gastropub messenger bag echo park twee exercitation roof party offal. Direct trade hammock mlkshk YOLO, asymmetrical iPhone tousled VHS swag normcore. Chicharrones gastropub waistcoat, elit disrupt heirloom magna. Occaecat four loko fashion axe non hoodie, qui elit chia microdosing roof party.

{% endsnippet %}
## Side-Menu Used for right side menu {% snippet html %} {% endsnippet %}
## Tooltip Used for custom tooltips {% snippet html %} {% endsnippet %}