# Atom components (49) Conventions and setup: see `components-index.md` (`{DOMAIN}/ai/components-index.md`). ### badge Small rounded label surfacing a status or category (active/inactive, service, severity) inline or in table cells. - Base class: `araxxe-badge` - Modifiers: `-accent`, `-active`, `-block`, `-border`, `-danger`, `-inactive`, `-info`, `-main`, `-matching-billed`, `-matching-interco`, `-matching-rated`, `-matching-reversement`, `-secondary`, `-service-a2psms`, `-service-ctq`, `-service-ebv`, `-service-qos`, `-service-simbox`, `-success`, `-warning` - Quark modifier families: text, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-badge(variant, options)` - props: block; accepts block content. - Example: ```html

inactive

main

info

``` (trimmed - full showcase at `{DOMAIN}/atom/badge/badge.render.html`) - Rendered variants: `{DOMAIN}/atom/badge/badge.render.html` ### bar Horizontal distribution bar built from color-filled `--part` segments, with an optional `--cursor` position marker. - Base class: `araxxe-bar` - Elements: `araxxe-bar--cursor`, `araxxe-bar--part` (mods: `-expand`) - Quark modifier families: fill - values in quarks.md - Pug mixin (library-internal): `+araxxe-bar`; accepts block content. (+2 more in `bar.mixin.pug`) - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/bar/bar.render.html` ### button Standard action button - uppercase gold-filled control for primary actions, with `-secondary`, `-ghost` and `-accent` alternatives. - Base class: `araxxe-button` - Modifiers: `-accent`, `-block`, `-focus`, `-ghost`, `-secondary`, `-tight` - States: `:disabled`, `:focus`, `:hover` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-button(options)` - props: alternative, disabled, state, block, tight, notAllowed; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/button/button/button.render.html`) - Rendered variants: `{DOMAIN}/atom/button/button/button.render.html` ### button-checkbox Checkbox styled as a bordered button with glyph check marks, used to toggle filters such as matching categories. - Group: button - Base class: `araxxe-button-checkbox` - Modifiers: `-block`, `-focus`, `-squared` - Elements: `araxxe-button-checkbox--check` (mods: `-off`, `-on`), `araxxe-button-checkbox--content`, `araxxe-button-checkbox--input`, `araxxe-button-checkbox--text` - States: `:checked`, `:disabled`, `:focus-visible`, `:hover` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-button-checkbox(options)` - props: block, checked, color, disabled, squared; accepts block content. - Example: ```html Button checkbox ``` (trimmed - full showcase at `{DOMAIN}/atom/button/button-checkbox/button-checkbox.render.html`) - Rendered variants: `{DOMAIN}/atom/button/button-checkbox/button-checkbox.render.html` ### button-menu Icon-above-text navigation button for the main menu, colorable per service, with `-selected` and `-notify` states. - Group: button - Base class: `araxxe-button-menu` - Modifiers: `-notify`, `-selected` - Elements: `araxxe-button-menu--icon`, `araxxe-button-menu--text` - States: `:disabled`, `:hover` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-button-menu(options)` - props: selected, notify, color, disabled. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/button/button-menu/button-menu.render.html`) - Rendered variants: `{DOMAIN}/atom/button/button-menu/button-menu.render.html` ### button-rounded Pill-shaped button composing icon/text `--slot`s, in main/secondary/tertiary/accent/ghost variants. - Group: button - Base class: `araxxe-button-rounded` - Modifiers: `-accent`, `-desaturate`, `-ghost`, `-main`, `-secondary`, `-tertiary` - Elements: `araxxe-button-rounded--slot` - States: `:disabled`, `:hover` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-button-rounded(options)` - props: variant, flag, desaturate, disabled, checked, unchecked, type; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/button/button-rounded/button-rounded.render.html`) - Rendered variants: `{DOMAIN}/atom/button/button-rounded/button-rounded.render.html` ### button-select Dropdown trigger button showing the current choice next to a caret glyph. - Group: button - Base class: `araxxe-button-select` - Modifiers: `-block`, `-focus`, `-main`, `-squared` - Elements: `araxxe-button-select--caret`, `araxxe-button-select--icon`, `araxxe-button-select--text` - States: `:disabled`, `:focus`, `:hover` - Quark modifier families: cursor, max-widths (`-wmax`), text - values in quarks.md - Pug mixin (library-internal): `+araxxe-button-select(options)` - props: block, disabled, ellipsis, icon, maxWidth, squared, state, variant; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/button/button-select/button-select.render.html`) - Rendered variants: `{DOMAIN}/atom/button/button-select/button-select.render.html` ### button-sidebar Flat full-width button used at the bottom of the sidebar panel. - Group: button - Base class: `araxxe-button-sidebar` - Pug mixin (library-internal): `+araxxe-button-sidebar`. - Example: ```html ``` - Rendered variants: `{DOMAIN}/atom/button/button-sidebar/button-sidebar.render.html` ### calendar-unit Single selectable day/month/year cell composed by calendar tables and pickers. - Base class: `araxxe-calendar-unit` - Modifiers: `-current`, `-selected` - States: `:disabled`, `:hover` - Pug mixin (library-internal): `+araxxe-calendar-unit(options)` - props: selected, disabled, current; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/calendar-unit/calendar-unit.render.html`) - Rendered variants: `{DOMAIN}/atom/calendar-unit/calendar-unit.render.html` ### caret-button Minimal transparent button aligning arbitrary `--slot` content, used as the clickable trigger of dropdowns and popovers. - Base class: `araxxe-caret-button` - Elements: `araxxe-caret-button--slot` - States: `:disabled`, `:hover` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-caret-button(options)` - props: disabled, notAllowed; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/caret-button/caret-button.render.html`) - Rendered variants: `{DOMAIN}/atom/caret-button/caret-button.render.html` ### connector Thin horizontal connector line used to visually link adjacent elements. - Base class: `araxxe-connector` - Pug mixin (library-internal): `+araxxe-connector`. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/connector/connector.render.html` ### country Country flag image (SVG by ISO code) sized through `-h` modifiers. - Base class: `araxxe-country` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`), widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-country(code, options)` - props: height. - Example: ```html abw

``` (trimmed - full showcase at `{DOMAIN}/atom/country/country.render.html`) - Rendered variants: `{DOMAIN}/atom/country/country.render.html` ### description Body-text paragraph carrying the full text quark set (alignment, color, size, ellipsis, wrapping). - Base class: `araxxe-description` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-description(options)` - props: align, color, ellipsis, multiLine; accepts block content. - Example: ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.

Text on multiple lines.

``` (trimmed - full showcase at `{DOMAIN}/atom/description/description.render.html`) - Rendered variants: `{DOMAIN}/atom/description/description.render.html` ### dot Circular avatar/badge dot sized with `-s`, filled or bordered with any palette color, holding initials, a glyph or an operator logo. Can be used combined to [Operator logo](#operatorlogo) atom. - Base class: `araxxe-dot` - Modifiers: `-baseline`, `-blink`, `-bordered` - Quark modifier families: border, cursor, fill, paddings (`-s/-v/-h`), sizes (`-s`), text - values in quarks.md - Pug mixin (library-internal): `+araxxe-dot(options)` - props: size, clickable, color, fill, variant, borderColor, blink, noText, operator; accepts block content. - Example: ```html

``` (trimmed - full showcase at `{DOMAIN}/atom/dot/dot.render.html`) - Rendered variants: `{DOMAIN}/atom/dot/dot.render.html` ### flag Colored text flag identifying a network role (O, OLO, OIO, GT, WL, OZO…) with `-inverted` and `-outlined` variants. - Base class: `araxxe-flag` - Modifiers: `-a2psms-gt`, `-a2psms-o`, `-a2psms-oio`, `-a2psms-olo`, `-a2psms-wl`, `-fill-ott`, `-inverted`, `-outlined`, `-service-a2psms`, `-simbox-o`, `-simbox-oio`, `-simbox-olo`, `-simbox-ozo` - Quark modifier families: cursor, fill - values in quarks.md - Pug mixin (library-internal): `+araxxe-flag(color, options)` - props: inverted, outlined, clickable; accepts block content. - Example: ```html Flag Flag Flag ``` (trimmed - full showcase at `{DOMAIN}/atom/flag/flag.render.html`) - Rendered variants: `{DOMAIN}/atom/flag/flag.render.html` ### icon Glyph-font icon with size, color, hover-color, animation and mirroring modifiers, rendered as a span or a clickable button. - Base class: `araxxe-icon` - Modifiers: `-blink`, `-flex`, `-hover-color-accent`, `-hover-color-danger`, `-hover-color-main`, `-hover-color-main-light`, `-hover-color-service-a2psms`, `-hover-color-shade-0`, `-hover-color-shade-100`, `-hover-color-shade-30`, `-hover-color-shade-5`, `-hover-color-shade-50`, `-hover-color-shade-50-faded`, `-hover-color-shade-75`, `-hover-color-shade-85`, `-hover-color-success`, `-hover-color-valid`, `-pulse-down`, `-pulse-up`, `-s128`, `-s14`, `-s18`, `-s28`, `-s32`, `-s34`, `-s58`, `-spin` - States: `:hover` - Quark modifier families: cursor, paddings (`-s/-v/-h`), sizes (`-s`), text, transformations - values in quarks.md - Pug mixin (library-internal): `+araxxe-icon(name, options)` - props: size, color, clickable, notAllowed, transform, title, hoverColor, tag, pulseDown, pulseUp, spin, blink. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/icon/icon.render.html`) - Rendered variants: `{DOMAIN}/atom/icon/icon.render.html` ### indicator Colored status stripe filling its relative container, used as the severity indicator column of striped tables. - Base class: `araxxe-indicator` - Modifiers: `-accent`, `-danger`, `-main`, `-shade-100`, `-shade-20`, `-shade-30`, `-shade-35`, `-shade-40`, `-shade-5`, `-shade-50`, `-shade-50-faded`, `-shade-95`, `-success`, `-warning` - Quark modifier families: fill - values in quarks.md - Pug mixin (library-internal): `+araxxe-indicator(options)` - props: variant. - Example: ```html

``` (trimmed - full showcase at `{DOMAIN}/atom/indicator/indicator.render.html`) - Rendered variants: `{DOMAIN}/atom/indicator/indicator.render.html` ### input-select Select-style trigger styled as an input, showing the current value plus an arrow button. - Group: input - Base class: `araxxe-input-select` - Modifiers: `-compact`, `-error`, `-secondary` - Elements: `araxxe-input-select--button`, `araxxe-input-select--input` (structural, no own styles) - States: `:disabled` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-input-select`. - Example: ```html ``` - Rendered variants: `{DOMAIN}/atom/input/input-select/input-select.render.html` ### input-text Single-line text input, with `-secondary` (rounded) and `-compact` variants. - Group: input - Base class: `araxxe-input-text` - Modifiers: `-compact`, `-secondary` - States: `:disabled` - Pug mixin (library-internal): `+araxxe-input-text(options)` - props: compact, disabled, placeholder, secondary, type, value. - Example: ```html ``` - Rendered variants: `{DOMAIN}/atom/input/input-text/input-text.render.html` ### line Hairline separator (`hr`), horizontal by default with a `-vertical` variant and fill-color modifiers. - Base class: `araxxe-line` - Modifiers: `-vertical` - Quark modifier families: fill - values in quarks.md - Pug mixin (library-internal): `+araxxe-line`. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/line/line.render.html` ### link Inline text link (anchor or button tag) with text quark modifiers and a `-no-underline` variant. - Base class: `araxxe-link` - Modifiers: `-no-underline` - States: `:hover` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-link(options)` - props: tag; accepts block content. - Example: ```html link ``` - Rendered variants: `{DOMAIN}/atom/link/link.render.html` ### list Plain bulleted list with pattern-library typography. - Base class: `araxxe-list` - Pug mixin (library-internal): `+araxxe-list`. - Example: ```html

item1
item2
item3

``` - Rendered variants: `{DOMAIN}/atom/list/list.render.html` ### logo Araxxe logo image with retina `srcset`. - Base class: `araxxe-logo` - Pug mixin (library-internal): `+araxxe-logo`. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/logo/logo.render.html` ### maintenance-banner Full-width banner announcing a scheduled maintenance window at the top of a template. - Base class: `araxxe-maintenance-banner` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-maintenance-banner(options)`. - Example: ```html

Maintenance scheduled from 23/12/2020 01:00:00 to 23/12/2020 01:00:00

``` - Rendered variants: `{DOMAIN}/atom/maintenance-banner/maintenance-banner.render.html` ### number Large numeric KPI figure with color/size modifiers and a reduced `--half` suffix element (e.g. %). - Base class: `araxxe-number` - Elements: `araxxe-number--half` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-number(options)` - props: color, size, bold, half; accepts block content. - Example: ```html 1234 34% ``` - Rendered variants: `{DOMAIN}/atom/number/number.render.html` ### operator-logo Telecom operator logo rendered as a sized background-image block, looked up by operator code. - Base class: `araxxe-operator-logo` - Modifiers: `-block`, `-contained` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`), sizes (`-s`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-operator-logo(operator, options)` - props: logoBlock, contained, height, size. - Example: ```html

``` (trimmed - full showcase at `{DOMAIN}/atom/operator-logo/operator-logo.render.html`) - Rendered variants: `{DOMAIN}/atom/operator-logo/operator-logo.render.html` ### ott-logo OTT service logo (WhatsApp, Viber…) rendered as a height-sized background-image block. - Base class: `araxxe-ott-logo` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-ott-logo(ott, options)` - props: height. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/ott-logo/ott-logo.render.html` ### paragraph Standard paragraph with the full text quark modifier set. - Base class: `araxxe-paragraph` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-paragraph(options)` - props: style; accepts block content. - Example: ```html

``` (trimmed - full showcase at `{DOMAIN}/atom/paragraph/paragraph.render.html`) - Rendered variants: `{DOMAIN}/atom/paragraph/paragraph.render.html` ### pin Small pill-shaped counter marker with bold white text, colored per service. - Base class: `araxxe-pin` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-pin(color)`. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/pin/pin.render.html` ### spot Round status dot (`-active`/`-inactive`) that can carry a glyph, used in statuses and contextual entries. Spot can be combined with any `araxxe-glyph` you want to use. - Base class: `araxxe-spot` - Modifiers: `-active`, `-inactive`, `-s18` - Quark modifier families: fill, paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-spot(options)` - props: size, active, icon, fill, half. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/spot/spot.render.html`) - Rendered variants: `{DOMAIN}/atom/spot/spot.render.html` ### subtitle-card Muted Titillium Web subtitle line displayed under a card title. - Base class: `araxxe-subtitle-card` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-subtitle-card`; accepts block content. - Example: ```html

Subtitle card

``` - Rendered variants: `{DOMAIN}/atom/subtitle-card/subtitle-card.render.html` ### supplier-logo Supplier/device logo (android, iqsimlog…) rendered as a height-sized background-image block. - Base class: `araxxe-supplier-logo` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-supplier-logo(supplier, options)` - props: height. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/supplier-logo/supplier-logo.render.html` ### switch On/off switch (`role="switch"`) with a sliding thumb, in `-on`/`-off` states. - Base class: `araxxe-switch` - Modifiers: `-off`, `-on` - Elements: `araxxe-switch--button` - Pug mixin (library-internal): `+araxxe-switch(active, options)` - props: tag. - Example: ```html ``` - Rendered variants: `{DOMAIN}/atom/switch/switch.render.html` ### tab-page Single tab header cell with a `-selected` state, composed by the tabs-page organism. - Base class: `araxxe-tab-page` - Modifiers: `-disabled`, `-selected` - Elements: `araxxe-tab-page--text` - States: `:hover` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-tab-page(options)` - props: selected, disabled, color. - Example: ```html

Tab page

``` (trimmed - full showcase at `{DOMAIN}/atom/tab-page/tab-page.render.html`) - Rendered variants: `{DOMAIN}/atom/tab-page/tab-page.render.html` ### text Generic inline text span with text quark modifiers (bold, color, ellipsis…). - Base class: `araxxe-text` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-text(options)` - props: bold, color, ellipsis, fadedOverflow, title, uppercase; accepts block content. - Example: ```html Normal Bold ``` (trimmed - full showcase at `{DOMAIN}/atom/text/text.render.html`) - Rendered variants: `{DOMAIN}/atom/text/text.render.html` ### text-date Editable date text cell (`contenteditable`) formatted dd.mm.yyyy, used by the date-range molecule. - Base class: `araxxe-text-date` - Pug mixin (library-internal): `+araxxe-text-date`. - Example: ```html

24.11.2020

``` - Rendered variants: `{DOMAIN}/atom/text-date/text-date.render.html` ### text-info Small bold uppercase label used for field labels and legends. - Base class: `araxxe-text-info` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-text-info(options)` - props: color; accepts block content. - Example: ```html Info ``` - Rendered variants: `{DOMAIN}/atom/text-info/text-info.render.html` ### text-profile Bold user/profile name text clamped to two lines with ellipsis. - Base class: `araxxe-text-profile` - Pug mixin (library-internal): `+araxxe-text-profile`. - Example: ```html Text profile The text profile may be longer ``` - Rendered variants: `{DOMAIN}/atom/text-profile/text-profile.render.html` ### textarea Multi-line text input, with a `-secondary` (rounded) variant. - Group: input - Base class: `araxxe-textarea` - Modifiers: `-compact`, `-secondary` - States: `:disabled` - Pug mixin (library-internal): `+araxxe-textarea(options)` - props: rows, variant; accepts block content. - Example: ```html ``` - Rendered variants: `{DOMAIN}/atom/input/textarea/textarea.render.html` ### thumbnail Responsive image (max-width 100%) for screenshots and previews. - Base class: `araxxe-thumbnail` - Pug mixin (library-internal): `+araxxe-thumbnail(src)`. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/thumbnail/thumbnail.render.html` ### title-big Page-level H1 title in light Titillium Web, with a `-light` variant for dark backgrounds. - Group: title - Base class: `araxxe-title-big` - Modifiers: `-light` - Pug mixin (library-internal): `+araxxe-title-big(options)` - props: tag, variant; accepts block content. - Example: ```html

Title big

``` - Rendered variants: `{DOMAIN}/atom/title/title-big/title-big.render.html` ### title-card H3 title used inside cards. - Group: title - Base class: `araxxe-title-card` - Pug mixin (library-internal): `+araxxe-title-card`; accepts block content. - Example: ```html

Title card

``` - Rendered variants: `{DOMAIN}/atom/title/title-card/title-card.render.html` ### title-header H1 title displayed in the application header, with width and `-ellipsis` modifiers. - Group: title - Base class: `araxxe-title-header` - Quark modifier families: text, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-title-header(options)` - props: ellipsis, width, title, tag; accepts block content. - Example: ```html

Title header

A title with a long text in order to have a size who should be ellipsis

``` - Rendered variants: `{DOMAIN}/atom/title/title-header/title-header.render.html` ### title-info Bold uppercase muted heading used for table column headers and key labels. - Group: title - Base class: `araxxe-title-info` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-title-info(options)` - props: ellipsis, title; accepts block content. - Example: ```html

Title info

``` - Rendered variants: `{DOMAIN}/atom/title/title-info/title-info.render.html` ### title-medium H2 section title. - Group: title - Base class: `araxxe-title-medium` - Quark modifier families: text - values in quarks.md - Pug mixin (library-internal): `+araxxe-title-medium(options)` - props: align. - Example: ```html

Title medium

``` - Rendered variants: `{DOMAIN}/atom/title/title-medium/title-medium.render.html` ### toggle Rectangular selectable toggle button, composed into filter groups by the toggles organism. - Base class: `araxxe-toggle` - Modifiers: `-accent`, `-disabled`, `-main`, `-matching-billed`, `-matching-interco`, `-matching-rated`, `-matching-reversement`, `-selected`, `-service-a2psms`, `-service-ebv`, `-service-qos`, `-service-simbox`, `-stretch` - States: `:disabled` - Quark modifier families: cursor, heights (`-h`), paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-toggle(options)` - props: selected, disabled, stretch, color; accepts block content. - Example: ```html ``` (trimmed - full showcase at `{DOMAIN}/atom/toggle/toggle.render.html`) - Rendered variants: `{DOMAIN}/atom/toggle/toggle.render.html` ### twinkle-area Skeleton-loading placeholder block that shimmers while content loads, sized with quark classes. - Base class: `araxxe-twinkle-area` - Modifiers: `-text` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`), text, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-twinkle-area(height, options)` - props: align, width. - Example: ```html

``` - Rendered variants: `{DOMAIN}/atom/twinkle-area/twinkle-area.render.html` ### unit Muted bold uppercase unit label displayed next to values (%, min, items…). - Base class: `araxxe-unit` - Pug mixin (library-internal): `+araxxe-unit`; accepts block content. - Example: ```html Unit ``` - Rendered variants: `{DOMAIN}/atom/unit/unit.render.html` ### upload File-upload control styled as a rounded button, wrapping a hidden file input. - Base class: `araxxe-upload` - Elements: `araxxe-upload--input` - Pug mixin (library-internal): `+araxxe-upload`. - Example: ```html Upload ``` - Rendered variants: `{DOMAIN}/atom/upload/upload.render.html`