Primitives
25
Code
Inline code, and its block twin. The pill is for a fragment inside a line of prose; the block drops the fill for a frame, because a filled background behind many lines fights the text it is meant to hold.
plain markup — no library on the page
Run npm i @ilomee/aura-core first.
import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';Code
index.html
<p class="aura-text aura-text--body">
Run <code class="aura-code">npm i @ilomee/aura-core</code> first.
</p>
<pre class="aura-code-block"><code class="aura-code">import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';</code></pre>The markup above is the whole API — there is no wrapper in any of the four packages, because a component here would set a class and add nothing. Write it as it stands, in whichever framework you are in.
Props
Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.
Emitted classes
Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.
| Class | Role | Notes |
|---|---|---|
| .aura-code | base | Required. A modifier does nothing without it. |
| .aura-code-block | base | Required. A modifier does nothing without it. |
Tokens and rules
components.css- font
- var(--mono)
- inline fill
- var(--surface-2)
- block frame
- 1px solid var(--border) · var(--r2)