# Organism components (31) Conventions and setup: see `components-index.md` (`{DOMAIN}/ai/components-index.md`). ### auto-scroll Scrollable container with fixed or window-based max heights, used to embed large tables. - Base class: `araxxe-auto-scroll` - Quark modifier families: heights (`-h`), max-heights (`-hmax`), paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-auto-scroll(options)` - props: height, maxHeight, heightWindowNecessary; accepts block content. - Example: ```html
Column on
multiple lines
Column 1
``` - Rendered variants: `{DOMAIN}/organism/block-link/block-link.render.html` ### calendar-picker Date picker panel combining a navigation header and calendar tables for day/month/year selection. - Base class: `araxxe-calendar-picker` - Elements: `araxxe-calendar-picker--body`, `araxxe-calendar-picker--header` (mods: `-activated`), `araxxe-calendar-picker--header--slot` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-calendar-picker-example--header(options)` - props: clickable, activated. (+3 more in `calendar-picker.mixin.pug`) - Example: ```html
January
2019

Title card

Badge
Badge
Subtitle card

7

Card
Card
Card
Card
``` - Rendered variants: `{DOMAIN}/organism/carousel/carousel.render.html` ### chat-list Used to list messages and screenshots on chat. - Base class: `araxxe-chat-list` - Modifiers: `-feed`, `-messages` - Elements: `araxxe-chat-list--content`, `araxxe-chat-list--header`, `araxxe-chat-list--input` - Pug mixin (library-internal): `+araxxe-chat-list-messages`. (+2 more in `chat-list.mixin.pug`) - Example: ```html

Title medium

AD
Speech bubble text in multiple lines.
Date

Title medium

AD
Speech bubble text in multiple lines.
Date
Container 70 20
``` - Rendered variants: `{DOMAIN}/organism/container/container.render.html` ### contextual-menu Popup menu stacking contextual entries, optionally scrollable with a max height. - Base class: `araxxe-contextual-menu` - Modifiers: `-bordered`, `-scrollable` - Elements: `araxxe-contextual-menu--filter`, `araxxe-contextual-menu--separator`, `araxxe-contextual-menu--slot` (structural, no own styles) - Quark modifier families: heights (`-h`), max-heights (`-hmax`), paddings (`-s/-v/-h`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-contextual-menu(options)` - props: maxHeight, scrollable, separator, height, bordered; accepts block content. (+1 more in `contextual-menu.mixin.pug`) - Example: ```html
OIO
O
All right reserved © www.araxxe.com
Legal statements
``` - Rendered variants: `{DOMAIN}/organism/footer/footer.render.html` ### header Application top bar with square icon buttons, title and content slots, colorable per service. - Base class: `araxxe-header` - Modifiers: `-service-a2psms`, `-service-ctq`, `-service-qos`, `-service-simbox` - Elements: `araxxe-header--separator`, `araxxe-header--slot` (mods: `-active`, `-center`, `-expand`, `-square`) - States: `:hover` - Quark modifier families: cursor, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-header(options)` - props: notifications, openPopover, operator. (+2 more in `header.mixin.pug`) - Example: ```html
Product

Title header

AD
Text profile The text profile may be lo…
``` (trimmed - full showcase at `{DOMAIN}/organism/header/header.render.html`) - Rendered variants: `{DOMAIN}/organism/header/header.render.html` ### horizontal-histogram Horizontal bar histogram with a percent scale header and labeled rows. - Base class: `araxxe-horizontal-histogram` - Modifiers: `-offset` - Elements: `araxxe-horizontal-histogram--axis`, `araxxe-horizontal-histogram--bar`, `araxxe-horizontal-histogram--bar-group`, `araxxe-horizontal-histogram--bar-group--bar`, `araxxe-horizontal-histogram--column`, `araxxe-horizontal-histogram--grid`, `araxxe-horizontal-histogram--header`, `araxxe-horizontal-histogram--table` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-horizontal-histogram`. - Example: ```html
0%
10%
20%
30%
40%
50%
60%
70%
80%
``` - Rendered variants: `{DOMAIN}/organism/horizontal-overlap/horizontal-overlap.render.html` ### horizontal-separe Row of columns separated by vertical rules, optionally equal-width (`-equivalent`). - Base class: `araxxe-horizontal-separe` - Modifiers: `-equivalent`, `-inline` - Elements: `araxxe-horizontal-separe--column` (mods: `-bottom`, `-center`, `-expand`), `araxxe-horizontal-separe--separator` (mods: `-thick`) - Quark modifier families: paddings (`-s/-v/-h`), text, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-horizontal-separe(options)` - props: equivalent; accepts block content. - Example: ```html
One
Two
Three
Four
``` (trimmed - full showcase at `{DOMAIN}/organism/horizontal-separe/horizontal-separe.render.html`) - Rendered variants: `{DOMAIN}/organism/horizontal-separe/horizontal-separe.render.html` ### horizontal-spacing Horizontal flex layout distributing `--column`s with a fixed gap (`-s`), alignment and `-expand` slots. - Base class: `araxxe-horizontal-spacing` - Modifiers: `-baseline`, `-bottom`, `-center`, `-equivalent`, `-left`, `-middle`, `-right`, `-s3`, `-s40`, `-s5`, `-s60`, `-space-between`, `-top`, `-wrap` - Elements: `araxxe-horizontal-spacing--column` (mods: `-expand`, `-flex`) - Quark modifier families: grows (`-g`), max-widths (`-wmax`), min-widths (`-wmin`), paddings (`-s/-v/-h`), sizes (`-s`), text, widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-horizontal-spacing(spacing, options)` - props: align, equivalent, wrap; accepts block content. - Example: ```html
First
Second
Third
First
Second
Third
``` (trimmed - full showcase at `{DOMAIN}/organism/horizontal-spacing/horizontal-spacing.render.html`) - Rendered variants: `{DOMAIN}/organism/horizontal-spacing/horizontal-spacing.render.html` ### menu Main navigation bar composed of button-menu items. - Base class: `araxxe-menu` - Elements: `araxxe-menu--content` (mods: `-expand`), `araxxe-menu--slot` - Pug mixin (library-internal): `+araxxe-menu(options)` - props: service. - Example: ```html ``` - Rendered variants: `{DOMAIN}/organism/menu/menu.render.html` ### modal Centered modal dialog with content/header areas and width modifiers, hosted by template-modal. - Base class: `araxxe-modal` - Elements: `araxxe-modal--content`, `araxxe-modal--footer`, `araxxe-modal--header`, `araxxe-modal--header--button`, `araxxe-modal--header--title` - Quark modifier families: heights (`-h`), paddings (`-s/-v/-h`), widths (`-w`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-modal(options)` - props: width, height, hideHeader, hideFooter; accepts block content. (+7 more in `modal.mixin.pug`) - Example: ```html

Title medium

Confirm ?

``` (trimmed; elements not shown here (`araxxe-modal--footer`, `araxxe-modal--header`, `araxxe-modal--header--button`, `araxxe-modal--header--title`) appear in the full showcase - full showcase at `{DOMAIN}/organism/modal/modal/modal.render.html`) - Rendered variants: `{DOMAIN}/organism/modal/modal/modal.render.html` ### news-banner Hero banner with a background image and content slots for product news. - Base class: `araxxe-news-banner` - Elements: `araxxe-news-banner--content`, `araxxe-news-banner--navigation`, `araxxe-news-banner--slot` - Pug mixin (library-internal): `+araxxe-news-banner`. - Example: ```html

Title big

Tab page
Tab page
Tab page
Page container
``` (trimmed - full showcase at `{DOMAIN}/organism/page-container/page-container.render.html`) - Rendered variants: `{DOMAIN}/organism/page-container/page-container.render.html` ### popover Floating panel stacking clickable `--slot` entries, anchored by header-popover or dropdowns. - Base class: `araxxe-popover` - Elements: `araxxe-popover--separator`, `araxxe-popover--slot`, `araxxe-popover--slot--button` (mods: `-active`) - States: `:hover` - Quark modifier families: cursor - values in quarks.md - Pug mixin (library-internal): `+araxxe-popover`. - Example: ```html
Labeled entry
en
fr
es
``` - Rendered variants: `{DOMAIN}/organism/popover/popover.render.html` ### recipient-card Composite card laying out recipient/operator information with tile slots. - Base class: `araxxe-recipient-card` - Modifiers: `-faded`, `-flat`, `-secondary` - Elements: `araxxe-recipient-card--content`, `araxxe-recipient-card--content--arrow`, `araxxe-recipient-card--header` - Pug mixin (library-internal): `+araxxe-recipient-card(options)` - props: faded, flat, secondary. (+3 more in `recipient-card.mixin.pug`) - Example: ```html

SOO

Title info
10%
Title info
Column on
multiple lines
Column 1
Tab page
Tab page
Tab page
``` - Rendered variants: `{DOMAIN}/organism/tabs-page/tabs-page.render.html` ### tile Flexible tile layout: vertical/horizontal tiles with grow-sized `--slot`s to compose dashboards. - Base class: `araxxe-tile` - Modifiers: `-horizontal`, `-vertical` - Elements: `araxxe-tile--slot` (mods: `-flat`, `-secondary`) - Quark modifier families: cursor, fill, grows (`-g`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-tile(direction)`; accepts block content. (+1 more in `tile.mixin.pug`) - Example: ```html
Slot 1
Slot 2
Slot 3
Slot
``` - Rendered variants: `{DOMAIN}/organism/tile/tile.render.html` ### toasts Stack container displaying toast notifications. - Base class: `araxxe-toasts` - Elements: `araxxe-toasts--slot` - Pug mixin (library-internal): `+araxxe-toasts`. - Example: ```html
Toast message.
Toast message.
``` - Rendered variants: `{DOMAIN}/organism/toasts/toasts.render.html` ### toggles Wrapping group of toggle buttons forming a multi-select filter. - Base class: `araxxe-toggles` - Elements: `araxxe-toggles--slot` - Pug mixin (library-internal): `+araxxe-toggles`. - Example: ```html
``` - Rendered variants: `{DOMAIN}/organism/toggles/toggles.render.html` ### vertical-menu Vertical navigation menu of vertical-menu-entry items. - Base class: `araxxe-vertical-menu` - Modifiers: `-scrollable` - Elements: `araxxe-vertical-menu--separator` - Quark modifier families: max-heights (`-hmax`) - values in quarks.md - Pug mixin (library-internal): `+araxxe-vertical-menu`. - Example: ```html