---
title: Styleguide

# Resources
featured_image: lena
resources:
  - name: lena
    src: images/lena.*
    params:
      alt: Woman smiling
      attr: 
---

## HTML

Test paragraph test paragraph test paragraph test paragraph test paragraph test
paragraph test paragraph test paragraph.

<b>Emphasis text</b>. <i>Alternate voice text</i>. <em>Stress emphasis text</em>. <strong>Strong text</strong>. <u>Annotated text</u> <s>Strikethrough text</s>.

<sup>Superscript</sup> and <sub>subscript</sub> text. Nested <sup>superscript <sup>text</sup></sup>. Nested <sub>subscript <sub>text</sub></sub>.

<small>Small text</small>

<mark>Highlighted text</mark>.

<del>Deleted</del> <ins>inserted</ins> text.

An <q>inline</q> quotation.

<data>Machine-readable data</data>

<time>Time and date</time>

<code>Code</code>

<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>

<kbd><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd></kbd>

<var>a</var> or <var>b</var>

<samp>Sample program output.</samp>

<pre>
  Pre       formatt
      ed    te
  xt.
</pre>

A <dfn>definition</dfn> of a term.

Decription list:

<dl>
<dt>Term</dt> <dd>Definition of term</dd>
</dl>

Address:

<address>
  123 Fake Street <br />
  Fakesville <br />
  USA
</address>

<aside>
  An aside an aside an aside an aside an aside an aside an aside an aside.
</aside>

Math: 

Block:
<math display="block">
  <mfrac>
    <mn>1</mn>
    <msqrt>
      <mn>2</mn>
    </msqrt>
  </mfrac>
</math>

Inline <math display="inline"><msup><mi>e = MC</mi><mn>2</mn></msup></math> math

Table: 

<style>
  .foo {
    background-color: #b00;
  }
</style>

<table>
  <caption>Table caption</caption>
  <colgroup>
    <col />
    <col />
    <col class="foo" />
  </colgroup>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body</td>
      <td>Body</td>
      <td>Body</td>
    </tr>
    <tr>
      <td>Body</td>
      <td>Body</td>
      <td>Body</td>
    </tr>
  </tbody>
  <tfoot colspan="3">
    <tr>
      <td>Footer</td>
      <td>Footer</td>
      <td>Footer</td>
    </tr>
  </tfoot>
</table>

<button>Button</button>

<details>
  <summary>Summary</summary>
  Details details details details details details details.
</details>

---

## Markdown

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Normal text. **Bold text.** _Italics text._ `Monospace text.` [Internal link](/).

[External link](https://wikipedia.org). [Mailto link](mailto:foo@bar.baz). [Phone link](tel:0000000).

Lists:

- Unordered list
- Unordered list
  - Nested unordered list
    - Nested unordered list
      - Nested unordered list
        - Nested unordered list
          - Nested unordered list
- Nested unordered list

1. Ordered list
1. Ordered list
   1. Nested Ordered list
      1. Nested Ordered list
         1. Nested Ordered list
            1. Nested Ordered list
               1. Nested Ordered list
1. Nested Ordered list

---

> Blockquote blockquote blockquote blockquote blockquote blockquote blockquote.

---

Code block:

```
int main() {

}
```

Code block with syntax highlighting:

```c
int main() {

}
```

---

Table:

| Heading | Heading | Heading |
| ------- | ------- | ------- |
| Body    | Body    | Body    |
| Body    | Body    | Body    |

---

## Shortcodes

Inline picture:

{{< picture
  src="lena"
>}}

Linked picture:

{{< picture
  src="lena"
  link="/"
>}}

Figure

{{< figure
  src="lena"
>}}

Linked figure

{{< figure
  src="lena"
  link="/"
>}}

Figure with caption:

{{< figure
  src="lena"
  caption="This is a caption"
>}}

---

An abbreviation shortcode: {{< abbr "eg" >}}.

{{< blockquote
  source="Source"
>}}
A blockquote shortcode.
{{< /blockquote >}}

{{< blockquote
  source="Source"
  style="epigram"
>}}
An epigram-style blockquote shortcode.
{{< /blockquote >}}

{{< blockquote
  source="Source"
  title="Film title"
  schemaType="Movie"
  style="epigram"
>}}
A blockquote shortcode.
{{< /blockquote >}}

{{< blockquote
  source="Source"
  title="Chapter title"
  schemaType="Chapter"
  titleSeries="Book title"
  schemaTypeSeries="Book"
  style="epigram"
>}}
A blockquote shortcode.
{{< /blockquote >}}

{{< blockquote
  source="Source"
  title="TV episode title"
  schemaType="TVEpisode"
  titleSeries="TV series title"
  schemaTypeSeries="TVSeries"
  numberSeries="S01E01"
  style="epigram"
>}}
A blockquote shortcode.
{{< /blockquote >}}

A {{< cite title="cite" >}} shortcode.

A {{< q >}}short quotation{{< /q >}} shortcode.