2013 · 2018
Massage therapist, makeup artist on TV shows, movie sets and photoshoots, prosthetics maker
Component showcase
A living reference of the site's building blocks. Each component below is interactive — hover, focus, and try the controls.
Breadcrumbs
Brand background
This surface expands to the available viewport width while the content remains centered within the 1920px site boundary.
Plain background
This section uses the same content boundary without applying a full-width background surface.
Closed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Donec ullamcorper nulla non metus auctor fringilla.
Open
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Buttons
Every button below is live. The labels name the state to try: hover, press and hold, or tab to give it keyboard focus. Hover and press paint outside the layout box, so neighbouring buttons never move.
Primary
Secondary
Tertiary
Icons
Inverted surface
Segmented control
A single-choice control where one segment is always selected. Hover, press, or tab to a segment to see its state, then use the arrow keys (or Home and End) to move the selection.
Inverted surface
Carousel
Horizontal scrollable card list with drag-to-slide and button controls. Responsive: adapts the number of visible cards based on container width. Try dragging left/right, or use the arrow buttons.
Alignment: middle
Alignment: end
Timeline
A carousel variant for chronological entries: cards sit edge-to-edge with no borders, connected by a continuous rail of dots. Each entry is a date and a body of text. Neighbouring entries scale into view at a lower opacity so more of the timeline is always hinted at.