Theme Components

See the html code rendering this Content
<article>
  <!-- Default Headings -->
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>

  <p>
    This is a paragraph with random content. Duis ut tempor mollit nisi
    exercitation et incididunt occaecat tempor aute ex cupidatat exercitation.
    Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis
    Lorem sint sunt anim velit esse pariatur laborum.
  </p>
  <p>
    This is another paragraph and this paragraph have a link to a footnote
    <a href="#footnote" id="footnote-ref"><sup>1</sup></a>.
  </p>
  <figure>
    <blockquote>
      <p>
        A blockquote paragraph inside a figure element.
      </p>
    </blockquote>
    <figcaption>
      And a figcaption containing the Citation element, like in
      <cite>
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">mdn web doc</a>
      </cite>.
    </figcaption>
  </figure>
  <blockquote>
    This is a blockquote <cite>-- and a citation</cite>
  </blockquote>

  <!-- Other elements to text markup -->
  Some inline html elements:
  <a>anchor</a>,
  <abbr title="Abbreviation">abbr</abbr>,
  <b>bold</b>,
  <cite>cite</cite>,
  <code>code</code>,
  <dfn title="dfn">definition</dfn>,
  <em>emphasized</em>,
  <i>italic</i>,
  <kbd>key</kbd>,
  <mark>highlighted</mark>,
  <small>small</small>,
  <strong>strong</strong>,
  <sub>sub</sub> (e.g. the 2 in the chemical formula for water: H<sub>2</sub>O),
  <sup>sup</sup> (e.g. the n in power of two: 2<sup>n</sup>),
  <u>underlined</u>,
  <var>variable<var>.

  <!-- Bulleted list -->
  <ul>
    <li>
      Item 1
      <ul>
        <li>Sub item 1</li>
        <li>Sub item 2</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <!-- Numbered list -->
  <ol>
    <li>First thing</li>
    <li>Second thing</li>
    <li>Third thing</li>
  </ol>

  <!-- Figure -->
  <figure>
    <img src="https://picsum.photos/id/145/4000/2000?grayscale" alt="A 4000x2000 image" />
    <figcaption>Large images should fit screen</figcaption>
  </figure>
  <details>
    <summary>Expand</summary>
    <p>You can read this content when the section is expanded</p>
    <figure>
      <img src="https://picsum.photos/id/1/300/200" alt="A 300x200 image" />
      <figcaption>Small images should not upscale</figcaption>
    </figure>
  </details>

  <!-- Form -->
  <form>
    <fieldset>
      <legend>Buttons examples:</legend>
      <button class="button">Normal Button</button>
      <br>
      <button class="button" disabled>Disabled Button</button>
      <br>
      <button class="button" type="button">Type Button</button>
      <br>
      <button class="button" type="reset">Reset Button</button>
      <br>
      <button class="button" type="submit">Submit Button</button>
      <br>
    </fieldset>
    <fieldset>
      <legend>Select examples:</legend>
      <label for="form-select">select:</label>
      <br>
      <select name="form-select" id="form-select">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br>
      <label for="form-select-selected">select with selected:</label>
      <br>
      <select name="form-select-selected" id="form-select-selected">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected>Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br>
      <label for="form-select-size">select with size:</label>
      <br>
      <select name="form-select-size" id="form-select-size" size="3">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br>
      <label for="form-select-multiple">select multiple:</label>
      <br>
      <select name="form-select-multiple" id="form-select-multiple" multiple>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
      </select>
      <br>
      <label for="form-select-optgroup">select with optgroup:</label>
      <br>
      <select name="form-select-optgroup" id="form-select-optgroup">
        <optgroup label="Group 1">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="fiat">Fiat</option>
          <option value="audi">Audi</option>
        </optgroup>
      </select>
      <br>
    </fieldset>
    <fieldset>
      <legend>Textarea examples:</legend>
      <textarea name="form-textarea" id="form-textarea" rows="10" cols="30">The cat was playing in the garden.</textarea>
      <br>
    </fieldset>
    <fieldset>
      <legend>Input examples:</legend>
      <label for="form-input-button">button:</label><br>
      <input type="button" name="form-input-button" id="form-input-button" value="Button"><br>
      <label for="form-input-checkbox">checkbox:</label><br>
      <input type="checkbox" name="form-input-checkbox" id="form-input-checkbox"><br>
      <label for="form-input-color">color:</label><br>
      <input type="color" name="form-input-color" id="form-input-color"><br>
      <label for="form-input-date">date:</label><br>
      <input type="date" name="form-input-date" id="form-input-date"><br>
      <label for="form-input-datetime-local">datetime-local:</label><br>
      <input type="datetime-local" name="form-input-datetime-local" id="form-input-datetime-local"><br>
      <label for="form-input-email">email:</label><br>
      <input type="email" name="form-input-email" id="form-input-email"><br>
      <label for="form-input-file">file:</label><br>
      <input type="file" name="form-input-file" id="form-input-file"><br>
      hidden (this is not a label):<br>
      <input type="hidden" name="form-input-hidden" id="form-input-hidden"><br>
      {{ with resources.Get "images/sine-die-logo.svg" | resources.Fingerprint "sha512" -}}
        <label for="form-input-image">image:</label><br>
        <input type="image" name="form-input-image" id="form-input-image" alt="input type image" src="{{- .RelPermalink -}}" style="height: 2em; width: 2em;"><br>
      {{- end }}
      <label for="form-input-month">month:</label><br>
      <input type="month" name="form-input-month" id="form-input-month"><br>
      <label for="form-input-number">number:</label><br>
      <input type="number" name="form-input-number" id="form-input-number"><br>
      <label for="form-input-password">password:</label><br>
      <input type="password" name="form-input-password" id="form-input-password"><br>
      <label for="form-input-radio">radio:</label><br>
      <input type="radio" name="form-input-radio" id="form-input-radio"><br>
      <label for="form-input-range">range:</label><br>
      <input type="range" name="form-input-range" id="form-input-range"><br>
      <label for="form-input-reset">reset:</label><br>
      <input type="reset" name="form-input-reset" id="form-input-reset"><br>
      <label for="form-input-search">search:</label><br>
      <input type="search" name="form-input-search" id="form-input-search"><br>
      <label for="form-input-submit">submit:</label><br>
      <input type="submit" name="form-input-submit" id="form-input-submit"><br>
      <label for="form-input-tel">tel:</label><br>
      <input type="tel" name="form-input-tel" id="form-input-tel"><br>
      <label for="form-input-text">text:</label><br>
      <input type="text" name="form-input-text" id="form-input-text"><br>
      <label for="form-input-time">time:</label><br>
      <input type="time" name="form-input-time" id="form-input-time"><br>
      <label for="form-input-url">url:</label><br>
      <input type="url" name="form-input-url" id="form-input-url"><br>
      <label for="form-input-week">week:</label><br>
      <input type="week" name="form-input-week" id="form-input-week"><br>
      <label for="form-input-placeholder">placeholder:</label><br>
      <input name="form-input-placeholder" id="form-input-placeholder" placeholder="this is a placeholder"><br>
      <label for="form-input-required">required:</label><br>
      <input name="form-input-required" id="form-input-required" required><br>
      <label for="form-input-datalist">datalist:</label><br>
      <input list="form-datalist" name="form-input-datalist" id="form-input-datalist"><br>
      <datalist id="form-datalist">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
    </fieldset>
  </form>
  <hr />
  <footer>
    This is the footer
    <ol>
      <li id="footnote">
        <p>Footnote text links back.<a href="#footnote-ref">↩</a></p>
      </li>
    </ol>
  </footer>
</article>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with random content. Duis ut tempor mollit nisi exercitation et incididunt occaecat tempor aute ex cupidatat exercitation. Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis Lorem sint sunt anim velit esse pariatur laborum.

This is another paragraph and this paragraph have a link to a footnote 1.

A blockquote paragraph inside a figure element.

And a figcaption containing the Citation element, like in mdn web doc .
This is a blockquote -- and a citation
Some inline html elements: anchor, abbr, bold, cite, code, definition, emphasized, italic, key, highlighted, small, strong, sub (e.g. the 2 in the chemical formula for water: H2O), sup (e.g. the n in power of two: 2n), underlined, variable.
  • Item 1
    • Sub item 1
    • Sub item 2
  • Item 2
  • Item 3
  1. First thing
  2. Second thing
  3. Third thing
A 4000x2000 image
Large images should fit screen
Expand

You can read this content when the section is expanded

A 300x200 image
Small images should not upscale
Buttons examples:




Select examples:









Textarea examples:
Input examples:













hidden (this is not a label):

{{ with resources.Get "images/sine-die-logo.svg" | resources.Fingerprint "sha512" -}}

{{- end }}