1<article>
  2  <!-- Default Headings -->
  3  <h1>Heading 1</h1>
  4  <h2>Heading 2</h2>
  5  <h3>Heading 3</h3>
  6  <h4>Heading 4</h4>
  7  <h5>Heading 5</h5>
  8  <h6>Heading 6</h6>
  9
 10  <p>
 11    This is a paragraph with random content. Duis ut tempor mollit nisi
 12    exercitation et incididunt occaecat tempor aute ex cupidatat exercitation.
 13    Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis
 14    Lorem sint sunt anim velit esse pariatur laborum.
 15  </p>
 16  <p>
 17    This is another paragraph and this paragraph have a link to a footnote
 18    <a href="#footnote" id="footnote-ref"><sup>1</sup></a>.
 19  </p>
 20  <figure>
 21    <blockquote>
 22      <p>
 23        A blockquote paragraph inside a figure element.
 24      </p>
 25    </blockquote>
 26    <figcaption>
 27      And a figcaption containing the Citation element, like in
 28      <cite>
 29        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite">mdn web doc</a>
 30      </cite>.
 31    </figcaption>
 32  </figure>
 33  <blockquote>
 34    This is a blockquote <cite>-- and a citation</cite>
 35  </blockquote>
 36
 37  <!-- Other elements to text markup -->
 38  Some inline html elements:
 39  <a>anchor</a>,
 40  <abbr title="Abbreviation">abbr</abbr>,
 41  <b>bold</b>,
 42  <cite>cite</cite>,
 43  <code>code</code>,
 44  <dfn title="dfn">definition</dfn>,
 45  <em>emphasized</em>,
 46  <i>italic</i>,
 47  <kbd>key</kbd>,
 48  <mark>highlighted</mark>,
 49  <small>small</small>,
 50  <strong>strong</strong>,
 51  <sub>sub</sub> (e.g. the 2 in the chemical formula for water: H<sub>2</sub>O),
 52  <sup>sup</sup> (e.g. the n in power of two: 2<sup>n</sup>),
 53  <u>underlined</u>,
 54  <var>variable<var>.
 55
 56  <!-- Bulleted list -->
 57  <ul>
 58    <li>
 59      Item 1
 60      <ul>
 61        <li>Sub item 1</li>
 62        <li>Sub item 2</li>
 63      </ul>
 64    </li>
 65    <li>Item 2</li>
 66    <li>Item 3</li>
 67  </ul>
 68
 69  <!-- Numbered list -->
 70  <ol>
 71    <li>First thing</li>
 72    <li>Second thing</li>
 73    <li>Third thing</li>
 74  </ol>
 75
 76  <!-- Figure -->
 77  <figure>
 78    <img src="https://picsum.photos/id/145/4000/2000?grayscale" alt="A 4000x2000 image" />
 79    <figcaption>Large images should fit screen</figcaption>
 80  </figure>
 81  <details>
 82    <summary>Expand</summary>
 83    <p>You can read this content when the section is expanded</p>
 84    <figure>
 85      <img src="https://picsum.photos/id/1/300/200" alt="A 300x200 image" />
 86      <figcaption>Small images should not upscale</figcaption>
 87    </figure>
 88  </details>
 89
 90  <!-- Form -->
 91  <form>
 92    <fieldset>
 93      <legend>Buttons examples:</legend>
 94      <button>Normal Button</button>
 95      <button disabled>Disabled Button</button>
 96      <button type="button">Type Button</button>
 97      <button type="reset">Reset Button</button>
 98      <button type="submit">Submit Button</button>
 99    </fieldset>
100    <fieldset>
101      <legend>Select examples:</legend>
102      <label for="form-select">select:</label>
103      <select name="form-select" id="form-select">
104        <option value="volvo">Volvo</option>
105        <option value="saab">Saab</option>
106        <option value="fiat">Fiat</option>
107        <option value="audi">Audi</option>
108      </select>
109
110      <label for="form-select-selected">select with selected:</label>
111
112      <select name="form-select-selected" id="form-select-selected">
113        <option value="volvo">Volvo</option>
114        <option value="saab">Saab</option>
115        <option value="fiat" selected>Fiat</option>
116        <option value="audi">Audi</option>
117      </select>
118
119      <label for="form-select-size">select with size:</label>
120
121      <select name="form-select-size" id="form-select-size" size="3">
122        <option value="volvo">Volvo</option>
123        <option value="saab">Saab</option>
124        <option value="fiat">Fiat</option>
125        <option value="audi">Audi</option>
126      </select>
127
128      <label for="form-select-multiple">select multiple:</label>
129
130      <select name="form-select-multiple" id="form-select-multiple" multiple>
131        <option value="volvo">Volvo</option>
132        <option value="saab">Saab</option>
133        <option value="fiat">Fiat</option>
134        <option value="audi">Audi</option>
135      </select>
136
137      <label for="form-select-optgroup">select with optgroup:</label>
138
139      <select name="form-select-optgroup" id="form-select-optgroup">
140        <optgroup label="Group 1">
141          <option value="volvo">Volvo</option>
142          <option value="saab">Saab</option>
143        </optgroup>
144        <optgroup label="Group 2">
145          <option value="fiat">Fiat</option>
146          <option value="audi">Audi</option>
147        </optgroup>
148      </select>
149    </fieldset>
150    <fieldset>
151      <legend>Textarea examples:</legend>
152      <textarea name="form-textarea" id="form-textarea" rows="10" cols="30">The cat was playing in the garden.</textarea>
153    </fieldset>
154    <fieldset>
155      <legend>Input type examples:</legend>
156      <label for="form-input-button">button:</label>
157      <input type="button" name="form-input-button" id="form-input-button" value="Button">
158      <label for="form-input-checkbox">checkbox:</label>
159      <input type="checkbox" name="form-input-checkbox" id="form-input-checkbox">
160      <label for="form-input-color">color:</label>
161      <input type="color" name="form-input-color" id="form-input-color">
162      <label for="form-input-datalist">datalist:</label>
163      <input list="form-datalist" name="form-input-datalist" id="form-input-datalist">
164      <datalist id="form-datalist">
165        <option value="Edge">
166        <option value="Firefox">
167        <option value="Chrome">
168        <option value="Opera">
169        <option value="Safari">
170      </datalist>
171      <label for="form-input-date">date:</label>
172      <input type="date" name="form-input-date" id="form-input-date">
173      <label for="form-input-datetime-local">datetime-local:</label>
174      <input type="datetime-local" name="form-input-datetime-local" id="form-input-datetime-local">
175      <label for="form-input-email">email:</label>
176      <input type="email" name="form-input-email" id="form-input-email">
177      <label for="form-input-file">file:</label>
178      <input type="file" name="form-input-file" id="form-input-file">
179      <label for="form-input-image">image:</label>
180      <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;">
181      <label for="form-input-month">month:</label>
182      <input type="month" name="form-input-month" id="form-input-month">
183      <label for="form-input-number">number:</label>
184      <input type="number" name="form-input-number" id="form-input-number">
185      <label for="form-input-password">password:</label>
186      <input type="password" name="form-input-password" id="form-input-password">
187      <label for="form-input-range">range:</label>
188      <input type="range" name="form-input-range" id="form-input-range">
189      <label for="form-input-reset">reset:</label>
190      <input type="reset" name="form-input-reset" id="form-input-reset">
191      <label for="form-input-search">search:</label>
192      <input type="search" name="form-input-search" id="form-input-search">
193      <label for="form-input-submit">submit:</label>
194      <input type="submit" name="form-input-submit" id="form-input-submit">
195      <label for="form-input-switch">switch:</label>
196      <input type="checkbox" name="form-input-switch" id="form-input-switch" role="switch">
197      <label for="form-input-tel">tel:</label>
198      <input type="tel" name="form-input-tel" id="form-input-tel">
199      <label for="form-input-text">text:</label>
200      <input type="text" name="form-input-text" id="form-input-text">
201      <label for="form-input-time">time:</label>
202      <input type="time" name="form-input-time" id="form-input-time">
203      <label for="form-input-url">url:</label>
204      <input type="url" name="form-input-url" id="form-input-url">
205      <label for="form-input-week">week:</label>
206      <input type="week" name="form-input-week" id="form-input-week">
207      <label for="form-input-placeholder">placeholder:</label>
208      <input name="form-input-placeholder" id="form-input-placeholder" placeholder="this is a placeholder">
209      <label for="form-input-required">required:</label>
210      <input name="form-input-required" id="form-input-required" required>
211    </fieldset>
212    <fieldset>
213      <legend>Radio buttons</legend>
214      <label>
215        <input type="radio" name="form-input-radio" id="form-input-radio-1">
216        radio one
217      </label>
218       <label>
219        <input type="radio" name="form-input-radio" id="form-input-radio-2">
220        radio two
221      </label>
222    </fieldset>
223  </form>
224  <hr />
225  <footer>
226    This is the footer
227    <ol>
228      <li id="footnote">
229        <p>Footnote text links back.<a href="#footnote-ref">↩</a></p>
230      </li>
231    </ol>
232  </footer>
233</article>