# Araxxe Pattern Library - Component Catalog Machine-friendly index of every UI component in the Araxxe design system. HTML/CSS is the integration surface: apply the documented classes to your own markup. The Pug mixins are only available inside the pattern-library repo (they document each component's options). How to use this catalog as a coding agent: 1. Building a full page? Start from the ready-made shells in `{DOMAIN}/ai/page-skeleton.md`. 2. Pick components in the table below. 3. Read their full entry (classes, modifiers, HTML example) in the category file: `{DOMAIN}/ai/components/atom.md`, `…/molecule.md`, `…/organism.md`, `…/template.md`. 4. Utility modifier classes (spacing, sizing, colors, animations): `{DOMAIN}/ai/quarks.md`. Icon glyph names: `{DOMAIN}/ai/icons.md`. Visual identity and design tokens: `{DOMAIN}/DESIGN.md`. ## Setup Load the stylesheets, replacing `{DOMAIN}` with the pattern-library host: ```html ``` ## Class conventions - Component (block): `araxxe-`, e.g. `class="araxxe-button"`. - Element: `araxxe---` as its own class on the inner tag, e.g. `class="araxxe-field--label"`. - Modifier: separate leading-dash class next to the block or element class, e.g. `class="araxxe-button -secondary -block"`. Never concatenated BEM-style. - States: `ion--*` classes are toggled at runtime by consuming apps (e.g. `ion--field-error`); interaction pseudo-classes are listed per component. - Base font size is 14px; `:root` text color and font family are set by the stylesheet. Golden rule: do not write custom CSS for anything this catalog covers - compose `araxxe-*` classes and quark modifiers instead. ## Components (150) | Component | Category | Base class | Description | | ------------------------ | -------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | badge | atom | `araxxe-badge` | Small rounded label surfacing a status or category (active/inactive, service, severity) inline or in table cells. | | bar | atom | `araxxe-bar` | Horizontal distribution bar built from color-filled `--part` segments, with an optional `--cursor` position marker. | | button | atom | `araxxe-button` | Standard action button - uppercase gold-filled control for primary actions, with `-secondary`, `-ghost` and `-accent` alternatives. | | button-checkbox | atom | `araxxe-button-checkbox` | Checkbox styled as a bordered button with glyph check marks, used to toggle filters such as matching categories. | | button-menu | atom | `araxxe-button-menu` | Icon-above-text navigation button for the main menu, colorable per service, with `-selected` and `-notify` states. | | button-rounded | atom | `araxxe-button-rounded` | Pill-shaped button composing icon/text `--slot`s, in main/secondary/tertiary/accent/ghost variants. | | button-select | atom | `araxxe-button-select` | Dropdown trigger button showing the current choice next to a caret glyph. | | button-sidebar | atom | `araxxe-button-sidebar` | Flat full-width button used at the bottom of the sidebar panel. | | calendar-unit | atom | `araxxe-calendar-unit` | Single selectable day/month/year cell composed by calendar tables and pickers. | | caret-button | atom | `araxxe-caret-button` | Minimal transparent button aligning arbitrary `--slot` content, used as the clickable trigger of dropdowns and popovers. | | connector | atom | `araxxe-connector` | Thin horizontal connector line used to visually link adjacent elements. | | country | atom | `araxxe-country` | Country flag image (SVG by ISO code) sized through `-h` modifiers. | | description | atom | `araxxe-description` | Body-text paragraph carrying the full text quark set (alignment, color, size, ellipsis, wrapping). | | dot | atom | `araxxe-dot` | Circular avatar/badge dot sized with `-s`, filled or bordered with any palette color, holding initials, a glyph or an operator logo. | | flag | atom | `araxxe-flag` | Colored text flag identifying a network role (O, OLO, OIO, GT, WL, OZO…) with `-inverted` and `-outlined` variants. | | icon | atom | `araxxe-icon` | Glyph-font icon with size, color, hover-color, animation and mirroring modifiers, rendered as a span or a clickable button. | | indicator | atom | `araxxe-indicator` | Colored status stripe filling its relative container, used as the severity indicator column of striped tables. | | input-select | atom | `araxxe-input-select` | Select-style trigger styled as an input, showing the current value plus an arrow button. | | input-text | atom | `araxxe-input-text` | Single-line text input, with `-secondary` (rounded) and `-compact` variants. | | line | atom | `araxxe-line` | Hairline separator (`hr`), horizontal by default with a `-vertical` variant and fill-color modifiers. | | link | atom | `araxxe-link` | Inline text link (anchor or button tag) with text quark modifiers and a `-no-underline` variant. | | list | atom | `araxxe-list` | Plain bulleted list with pattern-library typography. | | logo | atom | `araxxe-logo` | Araxxe logo image with retina `srcset`. | | maintenance-banner | atom | `araxxe-maintenance-banner` | Full-width banner announcing a scheduled maintenance window at the top of a template. | | number | atom | `araxxe-number` | Large numeric KPI figure with color/size modifiers and a reduced `--half` suffix element (e.g. %). | | operator-logo | atom | `araxxe-operator-logo` | Telecom operator logo rendered as a sized background-image block, looked up by operator code. | | ott-logo | atom | `araxxe-ott-logo` | OTT service logo (WhatsApp, Viber…) rendered as a height-sized background-image block. | | paragraph | atom | `araxxe-paragraph` | Standard paragraph with the full text quark modifier set. | | pin | atom | `araxxe-pin` | Small pill-shaped counter marker with bold white text, colored per service. | | spot | atom | `araxxe-spot` | Round status dot (`-active`/`-inactive`) that can carry a glyph, used in statuses and contextual entries. | | subtitle-card | atom | `araxxe-subtitle-card` | Muted Titillium Web subtitle line displayed under a card title. | | supplier-logo | atom | `araxxe-supplier-logo` | Supplier/device logo (android, iqsimlog…) rendered as a height-sized background-image block. | | switch | atom | `araxxe-switch` | On/off switch (`role="switch"`) with a sliding thumb, in `-on`/`-off` states. | | tab-page | atom | `araxxe-tab-page` | Single tab header cell with a `-selected` state, composed by the tabs-page organism. | | text | atom | `araxxe-text` | Generic inline text span with text quark modifiers (bold, color, ellipsis…). | | text-date | atom | `araxxe-text-date` | Editable date text cell (`contenteditable`) formatted dd.mm.yyyy, used by the date-range molecule. | | text-info | atom | `araxxe-text-info` | Small bold uppercase label used for field labels and legends. | | text-profile | atom | `araxxe-text-profile` | Bold user/profile name text clamped to two lines with ellipsis. | | textarea | atom | `araxxe-textarea` | Multi-line text input, with a `-secondary` (rounded) variant. | | thumbnail | atom | `araxxe-thumbnail` | Responsive image (max-width 100%) for screenshots and previews. | | title-big | atom | `araxxe-title-big` | Page-level H1 title in light Titillium Web, with a `-light` variant for dark backgrounds. | | title-card | atom | `araxxe-title-card` | H3 title used inside cards. | | title-header | atom | `araxxe-title-header` | H1 title displayed in the application header, with width and `-ellipsis` modifiers. | | title-info | atom | `araxxe-title-info` | Bold uppercase muted heading used for table column headers and key labels. | | title-medium | atom | `araxxe-title-medium` | H2 section title. | | toggle | atom | `araxxe-toggle` | Rectangular selectable toggle button, composed into filter groups by the toggles organism. | | twinkle-area | atom | `araxxe-twinkle-area` | Skeleton-loading placeholder block that shimmers while content loads, sized with quark classes. | | unit | atom | `araxxe-unit` | Muted bold uppercase unit label displayed next to values (%, min, items…). | | upload | atom | `araxxe-upload` | File-upload control styled as a rounded button, wrapping a hidden file input. | | calendar-table | molecule | `araxxe-calendar-table` | Grid of calendar-unit cells forming the day/month/year table of the calendar picker. | | card-numeral | molecule | `araxxe-card-numeral` | Clickable stat card showing a big number (optionally with icon) above a label, with `-accent` and `-selected` variants. | | card-stat | molecule | `araxxe-card-stat` | Service-colored statistics card used on overview dashboards, selectable like a tab. | | chat-message | molecule | `araxxe-chat-message` | One chat entry combining an avatar dot, author/date metadata and the message bubble. | | column-sorting | molecule | `araxxe-column-sorting` | Table column header cell with sort toggle arrows. | | contextual-entry | molecule | `araxxe-contextual-entry` | Selectable row of a contextual menu (icon + text slots) with hover and disabled states. | | date-range | molecule | `araxxe-date-range` | From/to date pair built from text-date atoms, used for period selection. | | dot-flagged | molecule | `araxxe-dot-flagged` | Dot avatar with a small flag pinned to one corner, indicating a network role. | | dotted-circle | molecule | `araxxe-dotted-circle` | Dotted-outline circle around centered content (number + text), used for aggregate or empty states. | | dropdown | molecule | `araxxe-dropdown` | Generic dropdown: a trigger `--button` plus an absolutely-positioned `--area` panel toggled with `ion--open`/`ion--close`. | | ellipsis-loader | molecule | `araxxe-ellipsis-loader` | Three-dot pulsing loading indicator. | | field | molecule | `araxxe-field` | Form field wrapper adding a label and an error state (`ion--field-error`) around any input or input group. | | from-to | molecule | `araxxe-from-to` | Compact origin → destination pair with an arrow icon between two slots (flags or labels). | | from-to-illustration | molecule | `araxxe-from-to-illustration` | Illustrated origin → destination scene with flagged device icons, used in case detail headers. | | header-popover | molecule | `araxxe-header-popover` | Header entry revealing a popover panel when open (notifications, profile menu). | | icon-circled | molecule | `araxxe-icon-circled` | Icon centered inside a sized circle. | | icon-flagged | molecule | `araxxe-icon-flagged` | Icon with a small flag pinned to its left or right corner. | | icon-text | molecule | `araxxe-icon-text` | Icon and text label side by side, colorable per service or state. | | input-group | molecule | `araxxe-input-group` | Input with attached addon slots (icons, buttons) forming a single visual control such as a search box. | | label-legend | molecule | `araxxe-label-legend` | Value with its caption underneath, used for KPI summaries. | | list-inline | molecule | `araxxe-list-inline` | Horizontal list laying out items (badges, chips) in a row with consistent gaps. | | list-underlined | molecule | `araxxe-list-underlined` | Vertical list whose items are separated by hairlines. | | measure-legend | molecule | `araxxe-measure-legend` | Chart legend lines pairing a measure number with its label and color. | | navigation-link | molecule | `araxxe-navigation-link` | Back/forward navigation control (anchor or button) with icon and text slots. | | news-summary | molecule | `araxxe-news-summary` | Dated news teaser showing a date and a summary paragraph. | | notification-double-icon | molecule | `araxxe-notification-double-icon` | Two combined glyphs forming one notification icon (e.g. SMS + call) with active states. | | pie-chart | molecule | `araxxe-pie-chart` | Pure-CSS pie/donut chart with centered number and unit, built from colorable `--piece` slices. | | rate-bar | molecule | `araxxe-rate-bar` | Legend row plus a segmented bar showing a proportion breakdown. | | rate-chart | molecule | `araxxe-rate-chart` | Circular gauge displaying a percentage progress (`-p`), colorable per service. | | screenshot | molecule | `araxxe-screenshot` | Screenshot figure with an information side panel. | | screenshot-bubble | molecule | `araxxe-screenshot-bubble` | Chat bubble displaying a screenshot image with its actions panel. | | segmented-control | molecule | `araxxe-segmented-control` | Group of mutually exclusive `--segment` buttons (with optional label) for switching views or groupings. | | sheet-head | molecule | `araxxe-sheet-head` | Column header cell of a sheet, combining an icon and a unit label. | | sheet-line | molecule | `araxxe-sheet-line` | One horizontal line of a sheet, divided into grow-sized `--slot`s. | | slider | molecule | `araxxe-slider` | Draggable range slider with filled bar, cursor thumb and service colors. | | speech-bubble | molecule | `araxxe-speech-bubble` | Chat text bubble, with a `-me` variant for own messages. | | status | molecule | `araxxe-status` | Status spot icon with its text label. | | table-details | molecule | `araxxe-table-details` | Key/value details table (header cell + value cell per row). | | table-simple | molecule | `araxxe-table-simple` | Basic data table with prebuilt content mixins for stats, graphs and per-service overviews. | | table-striped | molecule | `araxxe-table-striped` | Striped results table with severity indicator column, expandable rows and row highlighting. | | title-underlined | molecule | `araxxe-title-underlined` | Section title followed by an underline rule. | | toast | molecule | `araxxe-toast` | Single notification toast with message and actions, stacked by the toasts organism. | | tooltip-field | molecule | `araxxe-tooltip-field` | Small tooltip attached to a field (icon, text and pointer triangle), typically for validation errors. | | vertical-menu-entry | molecule | `araxxe-vertical-menu-entry` | Entry row of the vertical menu (icon + label) with hover state. | | auto-scroll | organism | `araxxe-auto-scroll` | Scrollable container with fixed or window-based max heights, used to embed large tables. | | block-link | organism | `araxxe-block-link` | Makes an entire card or block clickable by overlaying an invisible full-size link. | | calendar-picker | organism | `araxxe-calendar-picker` | Date picker panel combining a navigation header and calendar tables for day/month/year selection. | | card | organism | `araxxe-card` | White content card with shadow and padding - the basic surface of dashboards, with `-bordered` and `-selected` variants. | | carousel | organism | `araxxe-carousel` | Horizontal slide carousel with previous/next arrows. | | chat-list | organism | `araxxe-chat-list` | Used to list messages and screenshots on chat. | | chat-modal | organism | `araxxe-chat-modal` | Floating chat window combining a chat list, message input and header. | | container | organism | `araxxe-container` | Generic padding container using the quark padding classes (`-s/-v/-h`). | | contextual-menu | organism | `araxxe-contextual-menu` | Popup menu stacking contextual entries, optionally scrollable with a max height. | | dark-modal | organism | `araxxe-dark-modal` | Dark-themed modal panel used for case illustration popups. | | footer | organism | `araxxe-footer` | Application footer with copyright and legal link slots. | | header | organism | `araxxe-header` | Application top bar with square icon buttons, title and content slots, colorable per service. | | horizontal-histogram | organism | `araxxe-horizontal-histogram` | Horizontal bar histogram with a percent scale header and labeled rows. | | horizontal-overlap | organism | `araxxe-horizontal-overlap` | Row of circular items overlapping each other (stacked icon circles). | | horizontal-separe | organism | `araxxe-horizontal-separe` | Row of columns separated by vertical rules, optionally equal-width (`-equivalent`). | | horizontal-spacing | organism | `araxxe-horizontal-spacing` | Horizontal flex layout distributing `--column`s with a fixed gap (`-s`), alignment and `-expand` slots. | | menu | organism | `araxxe-menu` | Main navigation bar composed of button-menu items. | | modal | organism | `araxxe-modal` | Centered modal dialog with content/header areas and width modifiers, hosted by template-modal. | | news-banner | organism | `araxxe-news-banner` | Hero banner with a background image and content slots for product news. | | page-container | organism | `araxxe-page-container` | White rounded page surface with shadow, wrapping padded page `--content`. | | popover | organism | `araxxe-popover` | Floating panel stacking clickable `--slot` entries, anchored by header-popover or dropdowns. | | recipient-card | organism | `araxxe-recipient-card` | Composite card laying out recipient/operator information with tile slots. | | sheet | organism | `araxxe-sheet` | Structured data sheet with a header line and body lines, used in case details. | | sidebar | organism | `araxxe-sidebar` | Sliding side panel with its own header, used for secondary content such as operator details. | | table-layout | organism | `araxxe-table-layout` | Results-table page block wrapping a scrollable striped table, in default and `-light` variants. | | tabs-page | organism | `araxxe-tabs-page` | Tab strip of tab-page items for switching page sections. | | tile | organism | `araxxe-tile` | Flexible tile layout: vertical/horizontal tiles with grow-sized `--slot`s to compose dashboards. | | toasts | organism | `araxxe-toasts` | Stack container displaying toast notifications. | | toggles | organism | `araxxe-toggles` | Wrapping group of toggle buttons forming a multi-select filter. | | vertical-menu | organism | `araxxe-vertical-menu` | Vertical navigation menu of vertical-menu-entry items. | | vertical-spacing | organism | `araxxe-vertical-spacing` | Vertical stack layout adding a fixed gap between `--line`s. | | a2psms-case | template | - | Example A2P SMS case-details page composed on template-details. | | campaign-list | template | - | Example campaign list page composed on template-standard. | | case-list | template | - | Example EBV case list page composed on template-standard. | | case-list-a2psms | template | - | Example A2P SMS case list page composed on template-standard. | | case-list-simbox | template | - | Example SIM-box case list page composed on template-standard. | | confirm | template | - | Confirmation dialog page composed on template-modal. | | dark | template | - | Dark illustration modal page composed on template-modal. | | ebv-case | template | - | Example EBV case-details page composed on template-details. | | information | template | - | Information dialog page composed on template-modal. | | maintenance-details | template | - | Template-details page shown with the maintenance banner. | | maintenance-standard | template | - | Template-standard page shown with the maintenance banner. | | more-information | template | - | Wide informational modal with header, composed on template-modal. | | overview | template | - | Example EBV overview dashboard composed on template-standard. | | overview-a2psms | template | - | Example A2P SMS overview dashboard composed on template-standard. | | overview-simbox | template | - | Example SIM-box overview dashboard composed on template-standard. | | simbox-case | template | - | Example SIM-box case-details page composed on template-details. | | statistics-a2psms | template | - | Example A2P SMS statistics page composed on template-standard. | | statistics-ebv | template | - | Example EBV statistics page composed on template-standard. | | template-chat | template | `araxxe-template-chat` | Floating chat launcher and window layout with `-open`/`-close` states. | | template-details | template | `araxxe-template-details` | Detail-page shell (service header, optional maintenance banner, content header/body slots) - the base of case-details pages. | | template-login | template | `araxxe-template-login` | Login page layout with centered content card. | | template-menu | template | `araxxe-template-menu` | Slide-in main menu layer displayed over the page. | | template-modal | template | `araxxe-template-modal` | Modal overlay layer hosting modal dialogs. | | template-notifications | template | `araxxe-template-notifications` | Sliding notifications panel with `-open`/`-close` states. | | template-standard | template | `araxxe-template-standard` | Standard page shell (header, menu, content, footer) - the base of list and overview pages, expandable with `-wide`. | | template-toasts | template | `araxxe-template-toasts` | Fixed toasts overlay positioned over the application. |