Examples of UI Components

This page displays UI components available through Just the Docs and their associated Markdown syntax. This page also serves as a library of all custom styling that has been added to the website.

To view all of the custom colors that have been defined for this webiste, check out the Custom Scheme file in our repository.

Table of Contents

1. Typography
2. Buttons
3. Labels
4. Tables
5. Lists
6. Horizontal Rules
7. Color Palette

---

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

---

Buttons

Default Button Primary Button Purple Button Blue Button Green Button Grey Button
Image Caption Footer Nav Button

[Default Button](#buttons){: .btn }
[Primary Button](#buttons){: .btn .btn-primary }
[Purple Button](#buttons){: .btn .btn-purple }
[Blue Button](#buttons){: .btn .btn-blue }
[Green Button](#buttons){: .btn .btn-green }
[Grey Button](#buttons){: .btn .btn-grey } \
[Image Caption](#buttons){: .btn .image-caption }
[Footer Nav Button](#buttons){: .btn .footer-nav-button }

---

Labels

Default label

Blue label

Purple label

Green label

Yellow label

Red label

Section label

Section label

Section label

Centered label

Centered label

Default label
{: .label }

Blue label
{: .label .label-blue }
Purple label
{: .label .label-purple }
Green label
{: .label .label-green }
Yellow label
{: .label .label-yellow }
Red label
{: .label .label-red }

Section label
{: .label .label-blue .section-label }
Section label
{: .label .label-green .section-label }
Section label
{: .label .label-red .section-label }

Centered label
{: .label .label-purple .centered }
Centered label
{: .label .label-yellow .centered .section-label }

---

Tables

head1	head two	three
ok	good swedish fish	nice
out of stock	good and plenty	nice
ok	good oreos	hmm
ok	good zoute drop	yumm

| head1        | head two          | three |
|:-------------|:------------------|:------|
| ok           | good swedish fish | nice  |
| out of stock | good and plenty   | nice  |
| ok           | good `oreos`      | hmm   |
| ok           | good `zoute` drop | yumm  |

---

Lists

Unordered list

• Item 1
• Item 2
• Item 3

or

• Item 1
• Item 2
• Item 3

- Item 1
- Item 2
- Item 3

_or_

* Item 1
* Item 2
* Item 3

Ordered list

1. Item 1
2. Item 2
3. Item 3

1. Item 1
2. Item 2
3. Item 3

Task List

• Task 1
• Task 2
• Completed Task

- [ ] Task 1
- [ ] Task 2
- [x] Completed Task

---

Horizontal Rules

Several custom horizontal rules have been defined for this website, below is what they look like. For a horizontal rule to be properly rendered, you must leave a blank link on either side of the horizontal rule

---

---

---

---

---

---

---

<hr>

<hr class="bold medgrey">

<hr class="dashed blue">

<hr class="dotted flame">

<hr class="content-break aqua">

---

Color Palette

This is some RED text

This text is YELLOW on a PURPLE background

Using the INLINE-DISPLAY class, we can prevent the background from taking up the whole width of the page.

This text is DKGREY highlighted in AQUA

Using HTML, you can HIGHLIGHT select words

This is some **RED** text
{: .red-text }

This text is **YELLOW** on a **PURPLE** background
{: .purple .yellow-text }

Using the **INLINE-DISPLAY** class, we can prevent the background from taking up the whole width of the page.

This text is **DKGREY** highlighted in **AQUA**
{: .aqua .dkgrey-text .inline-display }

<p class="dkgrey-text inline-display">Using HTML, you can <span class="aqua">HIGHLIGHT</span> select words</p>

---