UI Components

1. Buttons
   1. Basic button styles
   2. Using utilities with buttons
2. Code
   1. Inline code
   2. Heading with <inline code snippet> in it.
   3. Syntax highlighted code blocks
   4. Code blocks with rendered examples
3. Labels
4. Lists
   1. Unordered list
   2. Ordered list
   3. Task list
   4. Definition list
5. Typography
   1. Font stack
   2. Responsive type scale
   3. Headings
6. Heading 1
   1. Heading 2
   2. Body text
   3. Inline elements
7. Tables

To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.

Buttons

Basic button styles

Links that look like buttons

[Link button](http://example.com/){: .btn }

[Link button](http://example.com/){: .btn .btn-purple }
[Link button](http://example.com/){: .btn .btn-blue }
[Link button](http://example.com/){: .btn .btn-green }

[Link button](http://example.com/){: .btn .btn-outline }

Button element

GitHub Flavored Markdown does not support the button element, so you’ll have to use inline HTML for this:

<button type="button" name="button" class="btn">Button element</button>

Using utilities with buttons

Button size

Wrap the button in a container that uses the font-size utility classes to scale buttons:

<span class="fs-8">
[Link button](http://example.com/){: .btn }
</span>

<span class="fs-3">
[Tiny ass button](http://example.com/){: .btn }
</span>

Spacing between buttons

Use the margin utility classes to add spacing between two buttons in the same block.

[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button ](http://example.com/){: .btn .btn-blue }

[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button ](http://example.com/){: .btn .btn-blue }

Code

Inline code

Code can be rendered inline by wrapping it in single back ticks.

Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Heading with `<inline code snippet>` in it.

Syntax highlighted code blocks

Use Jekyll’s built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
```

Code blocks with rendered examples

To demonstrate front end code, sometimes it’s useful to show a rendered example of that code. After including the styles from your project that you’ll need to show the rendering, you can use a <div> with the code-example class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the markdown="1" attribute to tell Jekyll that the code you are rendering will be in Markdown format… This is about to get meta…

[Link button](http://example.com/){: .btn }

<div class="code-example" markdown="1">

[Link button](http://example.com/){: .btn }

</div>
```markdown
[Link button](http://example.com/){: .btn }
```

Labels

Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.

Default label
{: .label }

Blue label
{: .label .label-blue }

Stable
{: .label .label-green }

New release
{: .label .label-purple }

Coming soon
{: .label .label-yellow }

Deprecated
{: .label .label-red }

Lists

Most lists can be rendered with pure Markdown.

Unordered list

- Item 1
- Item 2
- Item 3

_or_

* Item 1
* Item 2
* Item 3

Ordered list

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

Task list

- [ ] hello, this is a todo item
- [ ] hello, this is another todo item
- [x] goodbye, this item is done

Definition list

Definition lists require HTML syntax and aren’t supported with the GitHub Flavored Markdown compiler.

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Typography

Font stack

By default, Just the Docs uses a native system font stack for sans-serif fonts:

system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

For monospace type, like code snippets or the <pre> element, Just the Docs uses a native system font stack for monospace fonts:

"SFMono-Regular", Menlo, Consolas, Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Responsive type scale

Just the Docs uses a responsive type scale that shifts depending on the viewport size.

Headings

Headings are rendered like this:

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

Body text

Default body text is rendered like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline elements

Text can be **bold**, _italic_, or ~~strikethrough~~.

[Link to another page](another-page).

Tables

Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.

| 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  |