Skip navigation

Artist.Technical documentation

Overview Getting started

Core concepts

Foundations Layout Utilities

Component reference

Foundations

Colors

Layout

Block Columns Container Content & typography Grid Group Level Media row Stack

Surfaces & media

Card Feature Figure Inset Video

Artwork & collections

Backdrop Exhibit & Artwork Marquee Scroll-Story Selector Track

UI & forms

Accordion Breadcrumb Button Checkbox Dropdown Field & labels File Input Message Modal Navbar Notification Pagination Progress Radio Select Table Tabs Textarea Tooltip

Content patterns

Checklist Icon Price Quote Stats Tag

Patterns & behavior

Patterns Interactions / vanilla JS

Page studies

Overview Mr. Edutainment GrowthCandy StrategyComics Otherworldly

Reference

Components

Choose an entry to see its purpose, real rendered behavior, supported options, and copyable author HTML.

Find a component

47 reference entries.

No components match that search.

Foundations

ColorsShared semantic colors and opt-in section tinting.

Layout

BlockA simple spacer. Blocks have a bottom margin except when they are the last child.
ColumnsShare a row between related elements; stack in source order on mobile.
ContainerCenter content within the shared width and side gutters. No automatic vertical spacing.
Content & typographyText rhythm and readable measures. Surfaces do not silently change paragraph or heading sizes.
GridRepeated items in a fixed column count, with predictable wrapping.
GroupGroup defines section bounds and vertical space. Add Exhibit for section-wide artwork composition; Container limits only the inner content.
LevelA wrapping row with space between its items.
Media rowA small visual beside flexible text for activity updates, biographies or comment headers. Quote owns quotation content; Media can arrange its attribution.
StackAdd consistent spacing between a sequence of regions.

Surfaces & media

CardAn enclosed surface with optional media, header and content regions. Add Exhibit when this surface needs artwork composition; Exhibit also works on Group.
FeatureA compact benefit with a small visual. Uses normal heading and paragraph typography.
FigureMeaningful image or video, optionally captioned. Natural ratio is the default.
InsetA supporting region inside a Card, or a corner cutaway when combined with Exhibit.
VideoNative video with optional click-to-play enhancement, no autoplay.

Artwork & collections

BackdropOne background image shared by separate Groups, such as a CTA and footer. Each Group keeps its own content layout; Backdrop does not position the text.
Exhibit & ArtworkArtwork/content layout applied to a Group or Card—not a Card subtype. Artwork fills the host bounds, while Container or content measure limits the words.
MarqueeFaded-edge proof lanes with a static, scrollable reduced-motion fallback.
Scroll-StoryKeep narrative and media coordinated while preserving native page scrolling.
SelectorSelecting a disclosure changes both its open explanation and the paired Figure. Manual, with no autoplay.
TrackManual horizontal exploration with native scrolling and optional previous/next controls.

UI & forms

AccordionNative disclosures with reversible height motion and animated plus/minus strokes.
BreadcrumbNative links with explicit current/disabled states.
ButtonLinks or native buttons with a shared role and size vocabulary.
CheckboxNative form semantics, selection motion and accessible labels.
DropdownNative link disclosure with animated open/close, retained open-state focus, and Escape dismissal.
Field & labelsFloating labels by default, shared 48px single-line height, native inputs and validation.
FileA styled native file input with an external label.
InputA native text field with consistent size, focus and floating-label treatment.
MessageFeedback with separate heading and body regions.
ModalCentered, borderless native dialog with staged wash/content motion and native focus containment.
NavbarShared desktop disclosures and mobile drill-down, with visible active ancestry.
NotificationFeedback roles share the same color bindings as buttons.
PaginationNavigation links for paged content with clear current and unavailable states.
ProgressNative progress indication with an associated label.
RadioNative mutually exclusive choices, labeled by a fieldset legend.
SelectNative selection with the shared chevron, focus treatment and progressive picker animation.
TableSemantic table with an optional horizontally scrolling wrapper.
TabsPaired panels, subtle content arrival and a sliding active underline, with keyboard navigation.
TextareaA native multiline field using the same label and focus rules as Input.
TooltipSupplementary explanations on hover, keyboard focus or touch, without clipping inside a Card.

Content patterns

ChecklistContent roles with explicit size or arrangement choices.
IconSmall inline visuals and compact labels.
PriceA value with one or several cadence lines centered beside it.
QuoteLarge editorial quotations or compact testimonials, with independently optional attribution.
StatsValues and their explanations in a semantic description list.
TagA compact label, optionally in a wrapping collection.

Artist.css · Plain CSS and optional vanilla JavaScript.

Start · Components · Interactions