Component Reference

142 tokens · use as var(--color-primary)

Axes: type, tone, size, shape, icon mode, state.

Three axes: type (simple/embedded/stripe/toast), layout (inline/vertical) and validation (info/success/warning/danger). Action buttons reuse .btn with matching tone.

Compact pill for counts and status labels. One axis: type.

16×16 box with a 24×24 circular focus ring. Indeterminate is a .is-indeterminate class on the wrapper (native :indeterminate needs JS).

Compact tag for tags, status, removable filters. Axes: type, size (regular / sm), weight (outline / --bold), optional sticker (any 16×16 leading element) and optional .label__close button.

Underlined heading separator. Two sizes (regular = 14/21, --sm = 12/18) and two types — Section (header only) or Collapsable (--link appends a trailing chevron).

Path navigation. Use aria-current="page" on the last item; add .breadcrumb__sep after each non-last link; truncate with a leading #angle-double-right-small icon.

Segmented control + split button. Add .is-active to the selected segment.

Pill button for dark surfaces. Compose with tone modifiers; add a small status dot via the .indicator helper.

Default: media + body. Use .card--centered for icon cards, .card--inline for list rows. .is-selected turns the border primary.

Tinted circular media slot + title + description + optional CTA. Use --sm for the compact form.

Default with CTA · compact

Place your title here

Please, fill this text box with your content.

Button

No results found

Try adjusting your filters.

White card with .sheet-header (title + text), content rows (single column or 2 cols via .sheet-row), and an optional .sheet-footer of buttons.

32px tall fill, focus turns primary tint + ring. Validation tones tint the field and colour the feedback row. Textarea via .input__field--textarea.

Combine .input__field with leading/trailing text or button addons. Validation tones flow from the wrapping .input.

Keyboard-shortcut chip. Two sizes (regular / --sm) and two types (auto-width / --fixed square).

Default .loading-animation = circle (ring) spinner; .loading-animation-squares = paired squares (standalone, not composed). Sizes -xs/-sm/-md/-lg, colours -primary/-secondary/-light.

Page-size selector + summary + page list with prev/next chevrons. Use aria-current="page" on the active page.

8px tall track. States: loading (partial), --striped (animated 100%), --completed (green + check icon).

Sibling of Checkbox with the same 24×24 circular focus ring. Checked state = 4px primary inner ring.

Reuses .input__field + a trailing magnifier and optional clear button. The clear button is hidden when the field is empty.

Native <input type="range"> styled to match Lexicon. The fill follows --value on the wrapper. Optional value tooltip and right-aligned label.

Avatar-style chip. Three types (image, outline initials, icon), four sizes (--sm/--md/--lg) and rounded-square or --circle shape.

Image · outline initials · icon · circle L IN JD

Horizontal row over a baseline. Active tab gets a white card via .is-active.

Two sizes (regular 48×24, --sm 30×16). Optional icon inside the dot, visible only when checked.

Dark pill with a triangular arrow. Placement: bottom (default) or --top. Arrow alignment: center / --align-start / --align-end.

Free-text input that opens a filtered list. Editable trigger (vs Picker's read-only). Menu uses .dropdown.autocomplete__menu.

Two surfaces: .color-picker (palette panel with swatch grid) and .color-input (compact swatch + hex field).

Trigger: .input-group with #calendar icon. Panel: .date-picker-panel with month/year controls, weekday row, 7-column day grid, optional time row.

White card menu. <ul class="dropdown"> of .dropdown__item buttons. Supports group titles, dividers, left/right icons, active state, footer.

3-col grid (1fr auto 1fr). Move buttons in .dual-listbox__moves, optional reorder arrows in .dual-listbox__reorder.

Picker variant: .lang-picker__flag SVG flag (16×12) + locale code + optional status .label--sm.

.list__row with optional select checkbox, sticker, content (title + subtitle + detail + labels) and actions. States: .is-active, .has-notification.

.modal-overlay backdrop + .modal card (600px max). Validation variants tint header + colored border. Footer: first .btn--borderless pushes left automatically.

.multi-select shell: inline chips (.label--sm) + free-text input + clear button. Menu is .dropdown.

<ol class="stepper">. States: .is-complete (check icon) / .is-active (primary ring) / pending (number). Connector via ::after.

Horizontal tab bar. .navbar__item.is-active = primary-l1 underline. Also: .is-disabled, .navbar__more overflow button.

Read-only trigger (.picker__trigger) + .dropdown menu. Every item carries a #check-small slot (opacity:0 when inactive) so text aligns to the same column. Active item = primary-l3 soft fill + --color-dark text.

White card, optional .popover__header + .popover__body. .popover__body--scrollable caps height. Arrow mirrors Tooltip placement classes.

Right drawer: 280px default / .side-panel--lg 480px. Header + scrollable body + footer. Use .side-panel__body--no-padding for edge-to-edge content.

Zebra rows. .is-selected tints with primary-l3. .table__cell--gutter (48px) for checkbox/actions columns. Composes Checkbox, Sticker, Label.

#clock icon + .time-picker__field (HH:MM input + clear + up/down spinner) + optional .time-picker__tz timezone label.

<ul role="tree"> of .tree__row (toggle + icon + label). Children in <ul role="group"> with +24px indent.

40px icon sidebar. .vert-bar__cluster groups icons; .vert-bar__cluster--end pins a group to the bottom. .is-active = primary-l3 bg + left rail.

40px full-width items (no border-radius). Active: 6px primary left border + primary-l3 bg. Group parent uses .vert-nav__group-header. Icons: .vert-nav__icon-cell (24px wrapper) + .lexicon-icon.vert-nav__icon.

Full-width contextual toolbar. Default state: checkbox + ghost filter/order buttons + search (flex-1) + ghost view picker + primary New button. Active state (.management-toolbar--active): primary-l3 bg + 1px primary bottom border + count + bulk actions. Optional .management-toolbar__results blue-tint summary bar.

Application top bar. Product-menu toggle + page title on the left; global-nav icon + user avatar on the right. Add .control-menu__btn with #angle-left for back-navigation context.

Default

Documents and Media

With back button

Edit Document

280px sidebar panel for CMS apps. Reuses .vert-nav__item rows and .vert-nav__group-header section labels inside .cms-menu__groups. Section headers with an add action wrap the button and caret in .vert-nav__group-actions. Space items use .sticker in the icon cell.

18px breadcrumb for the CMS control bar. Ancestor crumbs: Regular secondary + #slash. Last crumb (aria-current="page"): Semibold dark + .cms-breadcrumb__action (⋮). Optional .cms-breadcrumb__space sticker — colour via inline style (user data).

240px white panel for selecting a CMS field type or structure. Field items use .cms-structure-dropdown__sticker--field (blue); the Structure item uses .cms-structure-dropdown__sticker--structure (orange). Add .is-active on any item to show selection state.

320px overlay sidebar for DXP administration. .control-panel wrapper · .control-panel__header (sticker + title + close) · .control-panel__search (reuses .search, 16px side padding) · .control-panel__body scrollable area · .control-panel__groups list of groups · .control-panel__group-header 12px uppercase label + chevron · .control-panel__item 40px row; .is-active adds primary-l3 bg + 6px primary left rail.

Use as <svg class="lexicon-icon"><use href="#name"></use></svg>. Sizes: lexicon-icon-sm (12) · default (16) · lexicon-icon-lg (24) · lexicon-icon-xl (32).

• accessibility
• add-cell
• add-column
• add-role
• add-row
• adjust
• align-center
• align-image-center
• align-image-full-width
• align-image-left
• align-image-right
• align-justify
• align-left
• align-right
• analytics
• angle-double-left
• angle-double-left-small
• angle-double-right
• angle-double-right-small
• angle-down
• angle-down-small
• angle-left
• angle-left-small
• angle-right
• angle-right-small
• angle-up
• angle-up-small
• announcement
• anonymize
• api-lock
• api-web
• archive
• arrow-end
• arrow-join
• arrow-right-full
• arrow-split
• arrow-start
• arrow-up-full
• arrow-xor
• asterisk
• audio
• automatic-translate
• autosize
• background-color
• bars
• bell-full
• bell-off
• bell-on
• block
• blogs
• blue-print
• bold
• bolt
• book
• bookmarks
• bookmarks-full
• books
• books-brush
• border-style
• border-width
• box-container
• braces
• brackets
• breadcrumb
• briefcase
• button
• calculator
• calendar
• camera
• cards
• cards-full
• cards2
• caret-bottom
• caret-bottom-l
• caret-double
• caret-double-l
• caret-left
• caret-left-l
• caret-right
• caret-right-l
• caret-top
• caret-top-l
• catalog
• categories
• chain-broken
• change
• change-list
• change-list-disabled
• chatbot
• check
• check-circle
• check-circle-full
• check-small
• check-square
• chip
• circle
• click
• closed-book
• cloud
• code
• cog
• coin
• color-picker
• columns
• comments
• community
• compress
• container
• content-shield
• control-panel
• cookie
• copy
• corner-radius
• credit-card
• crown
• cursor
• custom-field
• custom-size
• cut
• data-privacy
• database
• date
• date-time
• decimal
• desktop
• device-check
• devices
• diagonal-line
• diagram
• diamond
• diary
• disk
• display
• display-content
• document
• document-code
• document-compressed
• document-default
• document-image
• document-multimedia
• document-pdf
• document-pending
• document-presentation
• document-table
• document-text
• document-vector
• documents-and-media
• dollar-symbol
• download
• drag
• drop
• dropdown
• dynamic-data-list
• dynamic-data-mapping
• edit-layout
• effects
• ellipsis-h
• ellipsis-v
• embed
• emoji
• envelope-closed
• envelope-open
• environment
• environment-connected
• environment-disconnected
• exclamation-circle
• exclamation-full
• expand
• export
• field-area
• fieldset
• file-script
• file-template
• file-xsl
• filter
• flag-empty
• flag-full
• folder
• folder-lock
• folder-lock-line
• font-family
• font-size
• form-extensions
• format
• forms
• full-size
• gallery
• geolocation
• globe
• globe-lines
• globe-pin
• google
• google-drive
• grid
• h1
• h2
• hashtag
• hdd
• heading
• heart
• heart-full
• hidden
• hierarchy
• home
• home-full
• horizontal-scroll
• hr
• icon-rule-builder
• import
• import-export
• import-list
• indent-less
• indent-more
• info-book
• info-circle
• info-circle-open
• info-panel-closed
• info-panel-open
• information-live
• integer
• italic
• key
• layout-new-window
• liferay-ac
• link
• list
• list-ol
• list-ol-rtl
• list-ul
• list-ul-rtl
• live
• lock
• lock-dots
• logout
• low-vision
• magic
• maps
• mark-as-answer
• mark-as-question
• marketplace
• medal
• megaphone
• megaphone-full
• merge
• message
• message-boards
• minus-circle
• mobile-device-rules
• mobile-devices
• mobile-landscape
• mobile-portrait
• moon
• move
• move-folder
• myspace
• no-bot
• nodes
• number
• oauth
• opacity
• open-id
• order-arrow
• order-arrow-down
• order-arrow-left
• order-arrow-right
• order-arrow-up
• order-ascending
• order-descending
• order-form
• order-form-cog
• order-form-pencil
• order-form-tag
• order-list-down
• order-list-up
• organizations
• page
• page-template
• pages-tree
• paperclip
• paragraph
• password-policies
• paste
• paste-plaintext
• paste-word
• pause
• pencil
• percentage-banner
• percentage-symbol
• phone
• picture
• pin
• pin-full
• play
• plug
• plus
• plus-circle-full
• plus-squares
• polls
• price-list
• price-tag
• print
• process-builder
• product-configuration
• product-menu
• product-menu-closed
• product-menu-open
• products
• propagation
• publications
• puzzle
• question-circle
• question-circle-full
• question-mark
• quote-left
• quote-right
• radio-button
• react
• rectangle
• rectangle-split
• redo
• relationship
• reload
• remove-role
• remove-style
• repeat
• reply
• repository
• reset
• restore
• rocket
• rotate
• rss
• rss-full
• ruler
• rules
• scim
• search
• search-experiences
• search-plus
• select
• select-all
• select-from-list
• semantic-search
• send
• seo
• separator
• shadow
• share
• share-alt
• sheets
• shield-asterisk
• shield-check
• shopping-cart
• shortcut
• sign-in
• signature
• simple-circle
• simulation-menu
• simulation-menu-closed
• simulation-menu-open
• site-template
• sites
• slash
• slideshow
• social-facebook
• social-instagram
• social-linkedin
• social-twitter
• social-vimeo
• spacer
• special-character
• speed
• square
• square-hole
• square-hole-multi
• squares
• squares-clock
• staging
• star
• star-half
• star-o
• stars
• sticky
• strikethrough
• submission
• subscript
• suitcase
• sun
• superscript
• synonyms
• table
• table2
• tablet-landscape
• tablet-portrait
• tabs
• tag
• tap-ahead
• task-status
• test
• text
• text-color
• text-editor
• text-l
• textbox
• theme
• third-party
• thumbs-down
• thumbs-down-full
• thumbs-up
• thumbs-up-arrow
• thumbs-up-full
• time
• times
• times-circle
• times-circle-full
• times-small
• transform
• trash
• truck
• twitter
• twitter-x
• underline
• undo
• unlock
• unpin
• upload
• upload-multiple
• urgent
• user
• user-plus
• users
• vertical-scroll
• video
• video-streaming
• view
• vocabulary
• voice
• warehouse
• warning
• warning-full
• web-content
• wiki
• wiki-page
• workflow