# article

The markup of every demo on <https://kuiper.oeds.it/article/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## :where(not:article)

The same prose OUTSIDE the island, so the difference is the point of the panel: a bare heading takes `font-size: inherit`, and the size comes from a class on the card rather than from the tag.

```html
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, <a href="#mollit">consectetur adipiscing</a> elit, sed do <abbr title="eiusmod tempor incididunt">ETI</abbr> ut <b>labore et dolore</b> magna aliqua. Ut enim ad <bdi>minim veniam</bdi>, quis nostrud <bdo dir="rtl">exercitation ullamco</bdo> laboris nisi ut aliquip.<br> Ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit, sicut <cite>Cicero, De Finibus Bonorum et Malorum</cite> scripsit, ubi <code>lorem.ipsum()</code> occurrit <data value="42">quadraginta duo</data> vicibus.</p>
<p>Excepteur sint occaecat <del>cupidatat non proident</del>, sunt in culpa qui officia deserunt <dfn id="mollit">mollit anim</dfn> id est laborum. <em>Sed ut perspiciatis</em> unde omnis iste <i lang="grc-Latn">natus error</i> sit laudantium, <ins>totam rem aperiam</ins> eaque ipsa quae, sequitur <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>, ab illo <mark>inventore veritatis</mark> et quasi architecto, <q cite="#beatae">beatae vitae dicta sunt explicabo</q>, <s>nemo enim ipsam</s>.</p>
<hr>
<p><samp>error: voluptatem quia voluptas</samp> aspernatur aut odit aut fugit, <small>sed quia consequuntur magni dolores eos</small> qui ratione voluptatem sequi nesciunt. <span>Quisquam est qui dolorem</span> ipsum <strong>quia dolor sit amet</strong>, consectetur adipisci velit, H<sub>2</sub>O sed quia non numquam eius modi tempora, E = mc<sup>2</sup>, <a href="#mollit"><u>incidunt ut labore</u></a> et dolore magnam aliquam quaerat, ubi <var>x</var> aequat <var>y</var>, in verbo lorem.</p>
```

## :where(article)

Prose inside the island. Sixty-seven rules apply only here -- the heading sizes, the list indents, the markers -- and `<article>` and the rich-text editor's body are the island's two members.

```html
<article>
 <h3>Lorem ipsum dolor sit amet</h3>
 <p>Lorem ipsum dolor sit amet, <a href="#mollit">consectetur adipiscing</a> elit, sed do <abbr title="eiusmod tempor incididunt">ETI</abbr> ut <b>labore et dolore</b> magna aliqua. Ut enim ad <bdi>minim veniam</bdi>, quis nostrud <bdo dir="rtl">exercitation ullamco</bdo> laboris nisi ut aliquip.<br> Ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit, sicut <cite>Cicero, De Finibus Bonorum et Malorum</cite> scripsit, ubi <code>lorem.ipsum()</code> occurrit <data value="42">quadraginta duo</data> vicibus.</p>
 <p>Excepteur sint occaecat <del>cupidatat non proident</del>, sunt in culpa qui officia deserunt <dfn>mollit anim</dfn> id est laborum. <em>Sed ut perspiciatis</em> unde omnis iste <i lang="grc-Latn">natus error</i> sit laudantium, <ins>totam rem aperiam</ins> eaque ipsa quae, sequitur <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>, ab illo <mark>inventore veritatis</mark> et quasi architecto, <q cite="#beatae">beatae vitae dicta sunt explicabo</q>, <s>nemo enim ipsam</s>.</p>
 <hr>
 <p><samp>error: voluptatem quia voluptas</samp> aspernatur aut odit aut fugit, <small>sed quia consequuntur magni dolores eos</small> qui ratione voluptatem sequi nesciunt. <span>Quisquam est qui dolorem</span> ipsum <strong>quia dolor sit amet</strong>, consectetur adipisci velit, H<sub>2</sub>O sed quia non numquam eius modi tempora, E = mc<sup>2</sup>, <a href="#mollit"><u>incidunt ut labore</u></a> et dolore magnam aliquam quaerat, ubi <var>x</var> aequat <var>y</var>, in verbo lorem.</p>
</article>
```