<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>Normal Button</button>
      <button disabled>Disabled Button</button>
      <button type="button">Type Button</button>
      <button type="reset">Reset Button</button>
      <button type="submit">Submit Button</button>
    </fieldset>
    <fieldset>
      <legend>Select examples:</legend>
      <label for="form-select">select:</label>
      <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>

      <label for="form-select-selected">select with selected:</label>

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

      <label for="form-select-size">select with size:</label>

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

      <label for="form-select-multiple">select multiple:</label>

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

      <label for="form-select-optgroup">select with optgroup:</label>

      <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>
    </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>
    </fieldset>
    <fieldset>
      <legend>Input type examples:</legend>
      <label for="form-input-button">button:</label>
      <input type="button" name="form-input-button" id="form-input-button" value="Button">
      <label for="form-input-checkbox">checkbox:</label>
      <input type="checkbox" name="form-input-checkbox" id="form-input-checkbox">
      <label for="form-input-color">color:</label>
      <input type="color" name="form-input-color" id="form-input-color">
      <label for="form-input-datalist">datalist:</label>
      <input list="form-datalist" name="form-input-datalist" id="form-input-datalist">
      <datalist id="form-datalist">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <label for="form-input-date">date:</label>
      <input type="date" name="form-input-date" id="form-input-date">
      <label for="form-input-datetime-local">datetime-local:</label>
      <input type="datetime-local" name="form-input-datetime-local" id="form-input-datetime-local">
      <label for="form-input-email">email:</label>
      <input type="email" name="form-input-email" id="form-input-email">
      <label for="form-input-file">file:</label>
      <input type="file" name="form-input-file" id="form-input-file">
      <label for="form-input-image">image:</label>
      <input type="image" name="form-input-image" id="form-input-image" alt="input type image" src="{{<  resorce-relurl "images/sine-die-logo.svg" >}}" style="height: 2em; width: 2em;">
      <label for="form-input-month">month:</label>
      <input type="month" name="form-input-month" id="form-input-month">
      <label for="form-input-number">number:</label>
      <input type="number" name="form-input-number" id="form-input-number">
      <label for="form-input-password">password:</label>
      <input type="password" name="form-input-password" id="form-input-password">
      <label for="form-input-range">range:</label>
      <input type="range" name="form-input-range" id="form-input-range">
      <label for="form-input-reset">reset:</label>
      <input type="reset" name="form-input-reset" id="form-input-reset">
      <label for="form-input-search">search:</label>
      <input type="search" name="form-input-search" id="form-input-search">
      <label for="form-input-submit">submit:</label>
      <input type="submit" name="form-input-submit" id="form-input-submit">
      <label for="form-input-switch">switch:</label>
      <input type="checkbox" name="form-input-switch" id="form-input-switch" role="switch">
      <label for="form-input-tel">tel:</label>
      <input type="tel" name="form-input-tel" id="form-input-tel">
      <label for="form-input-text">text:</label>
      <input type="text" name="form-input-text" id="form-input-text">
      <label for="form-input-time">time:</label>
      <input type="time" name="form-input-time" id="form-input-time">
      <label for="form-input-url">url:</label>
      <input type="url" name="form-input-url" id="form-input-url">
      <label for="form-input-week">week:</label>
      <input type="week" name="form-input-week" id="form-input-week">
      <label for="form-input-placeholder">placeholder:</label>
      <input name="form-input-placeholder" id="form-input-placeholder" placeholder="this is a placeholder">
      <label for="form-input-required">required:</label>
      <input name="form-input-required" id="form-input-required" required>
    </fieldset>
    <fieldset>
      <legend>Radio buttons</legend>
      <label>
        <input type="radio" name="form-input-radio" id="form-input-radio-1">
        radio one
      </label>
       <label>
        <input type="radio" name="form-input-radio" id="form-input-radio-2">
        radio two
      </label>
    </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>