Jump to main content

Docs
Examples
Accessibility
Browser support
Contribute

Component examples

Base elements

Components

Accordion
Accordion / Headings
Accordion / Tick elements
Article pagination
Badge / Chips
Badge / Colors
Badge / Default
Badge / Side Navigation
Badges / Tabs
Breadcrumbs
Buttons / Alignment
Buttons / Base
Buttons / Brand
Buttons / Default
Buttons / Dense
Buttons / Icon
Buttons / Inline
Buttons / Link
Buttons / Negative
Buttons / Positive
Buttons / Pressed
Buttons / Processing
Buttons / Small
Card / Content Bleed
Card / Default
Card / Header
Card / Highlighted
Card / Image
Card / Overlay (deprecated)
Chip / Colors
Chip / Default
Chip / Dense
Chip / Inline
Chip / Link
Chip / Long values
Chip / Variants
Chip / Dismiss
Code snippet / Default
Code snippet / Multiple dropdowns
Code snippet / Dropdown
Code Snippet / Icon
Code snippet / Bordered
Code snippet / Numbered
Code Snippet / Syntax highlight
Code Snippet / Wrapping
Contextual menu / Default
Contextual menu / With indicator
CTA Block / Borderless
CTA Block / Default
Divider / Default
Divider / Responsive columns
Empty State / Error management
Empty State / No content
Empty State / User action triggered
Equal height row / Three column row
Equal height row / Three column row, wrap
Equal height row / Four items per column and full-screen divider
Equal height row / Four items per column and full-screen divider, wrap
Equal height row / Four column row
Equal height row / Four column row, wrap
Equal heights / 3 columns / Without CTA
Equal heights / 3 columns / Without description
Equal heights / 3 columns
Equal heights / 4 columns / Custom aspect ratios
Equal heights / 4 columns / Without CTA
Equal heights / 4 columns / Without description
Equal heights / 4 columns
Equal heights / 4 columns / H4 Subtitle
Equal heights / Minimal content
Equal heights / Mixed column items
Forms / Checkbox heading
Forms / Checkbox indeterminate
Forms / Checkbox inline
Forms / Checkbox Validation
Forms / Checkbox
Forms / Default
Forms / Dense
Forms / Fieldset required
Forms / Help text / Dense
Forms / Help text
Forms / Inline
Forms / Stacked
Forms / Validation / Dense
Forms / Validation / Dense select wrapper
Forms / Validation
Forms / Required
Forms / Password toggle
Forms / Radio heading
Forms / Radio inline
Forms / Radio Validation
Forms / Radio
Forms / Tick element variants
Grid / Default
Grid / Empty columns
Grid / Full
Grid / Incorrect usage of empty columns
Grid / Nesting - Medium screens
Grid / Nesting - Small screens
Grid / Nesting - All screens
Grid / Offset columns
Grid / Responsive
Legacy grid / 25/25/25/25 (deprecated)
Legacy grid / 25/25/50 (deprecated)
Legacy grid / 25/75 + 50/50 responsive (deprecated)
Legacy grid / 25/75 on large (deprecated)
Legacy grid / 25/75 on medium (deprecated)
Legacy grid / 25/75 (deprecated)
Legacy grid / 50/50 (deprecated)
Legacy grid / 75/25 + 50/50 responsive (deprecated)
Legacy grid / 75/25 on large (deprecated)
Legacy grid / 75/25 on medium (deprecated)
Legacy grid / 75/25 (deprecated)
Legacy grid / Bordered (deprecated)
Legacy grid / Default (deprecated)
Legacy grid / Empty columns (deprecated)
Legacy grid / Full (deprecated)
Legacy grid / Incorrect usage of empty columns (deprecated)
Legacy grid / Nesting - Medium screens (deprecated)
Legacy grid / Nesting - Small screens (deprecated)
Legacy grid / Nesting - All screens (deprecated)
Legacy grid / Offset columns (deprecated)
Legacy grid / Responsive (deprecated)
Heading icon / Small
Heading icon / Stacked
Heading icon / Default
Headings / Default
Headings / Display
Headings / Mixed classes
Headings / Muted
Hero / 404
Hero / 50/50 / Without subtitle
Hero / 50/50 / Full width image
Hero / 50/50 / Without image
Hero / 50/50 / Split on Medium
Hero / 50/50
Hero / 75/25
Hero / Blog
Hero / Fallback
Hero / Heading
Hero / Subtitle
Hero / Line break
Hero / Nested grid
Hero / Horizontal rules
Hero / Search
Hero / Sections
Hero / Signpost logo (deprecated)
Hero / Signpost logo / Full width image
Hero / Signpost logo
Icons / Additional
Icons / Dark (deprecated)
Icons / Links
Icons / Social
Icons / Standard
Image / Border
Image / Caption
Image Container / Aspect Ratio / 16:9
Image Container / Aspect Ratio / All
Image Container / Aspect Ratio / Responsive / All
Image Container / Aspect Ratio / Responsive
Image Container / Cover
Image Container / Highlighted
Image / Shadow
Image / Spacing
Labels (deprecated) / Default
Linked Logo Section / 25/75
Linked Logo Section / 50/50
Linked Logo Section / Default
Links / Default
Links / Anchor
Links / Back to top
Links / Inverted (deprecated)
Links / Skip Link
Links / Soft
List tree / Default
List tree / Default / Expanded
List tree / Legacy
Lists / Nested Count
Lists / Ordered list nested in stepped list
Lists / Default
Lists / All variations with horizontal divider and wrapping text
Lists / All variations with horizontal divider
Lists / Bulleted with horizontal divider
Lists / Ordered with horizontal divider
Lists / Ticked with horizontal divider
Lists / Horizontal divider
Lists / Horizontal section / 25/75 / Bulleted
Lists / Horizontal section / 25/75 / Crossed
Lists / Horizontal section / 25/75 / Ordered
Lists / Horizontal section / 25/75 / Ticked
Lists / Horizontal section / 25/75
Lists / Horizontal section / Bulleted
Lists / Horizontal section / Crossed
Lists / Horizontal section / Ordered
Lists / Horizontal section / Ticked
Lists / Horizontal section
Lists / Stretched with alignment
Lists / Stretched
Lists / Inline
Lists / Middot
Lists / Split
Lists / Status
Lists / Stepped detailed (all headings)
Lists / Stepped detailed
Lists / Stepped heading classes
Lists / Stepped (all headings)
Lists / Stepped without headings
Lists / Stepped
Logo section
Logo section / Dark
Logo section / Dense
Logo section / Misaligned logos
Logo section in six-column parent container
Logo section / Lazyloaded
Logo section / Legacy square images
Logo section / Line breaks
Matrix
Media object / Circle
Media object / Large
Media object / Default
Modal / Default
Modal / With footer
Modal / Scrollable
Navigation / Grid
Navigation / Deprecated dark
Navigation / Deprecated old logo
Navigation / Deprecated
Navigation / Dropdown alignment
Navigation / Dropdown dark
Navigation / Full width dropdowns
Navigation / Dropdown
Navigation / Full-width
Navigation / Reduced
Navigation / Search dark
Navigation / Search
Navigation / Sliding dark
Navigation / Sliding with search
Navigation / Sliding
Notifications / Action
Notifications / Borderless
Notifications / Caution
Notifications / Dismissible
Notifications / Information
Notifications / Inline
Notifications / Negative
Notifications / Default
Notifications / Positive
Notifications / Timestamp
Notifications / Variants
Pagination / Deprecated
Pagination / Disabled
Pagination / Truncated
Pagination / Previous and next buttons only
Pagination / Default
Pricing block / 2-blocks
Pricing block / 3-blocks
Pricing block / 4-blocks
Pull quote / Image
Pull quote / Default
Pull quote / Large
Pull quote / Small
Pull quote / Variants
Quote Wrapper / Large quote / Minimal
Quote Wrapper / Large quote / No citation
Quote Wrapper / Large quote / No CTA, image, or citation
Quote Wrapper / Large quote / No CTA or image
Quote Wrapper / Large quote / No header or signpost
Quote Wrapper / Large quote / No header
Quote Wrapper / Large quote / No signpost
Quote Wrapper / Large quote / Shallow spacing
Quote Wrapper / Large quote
Quote Wrapper / Medium quote / No citation
Quote Wrapper / Medium quote / No header
Quote Wrapper / Medium quote / No signpost
Quote Wrapper / Medium quote
Quote Wrapper / Small quote / No citation
Quote Wrapper / Small quote / No header
Quote Wrapper / Small quote / No signpost
Quote Wrapper / Small quote
Rich list / Horizontal / 50/50 / Bulleted
Rich list / Horizontal / Bulleted
Rich list / Horizontal / 50/50 / Bulletless / Without description or logo section
Rich list / Horizontal / 50/50 / Bulletless / Without description
Rich list / Horizontal / 50/50 / Bulletless / Without logo section
Rich list / Horizontal / 50/50 / Bulletless
Rich list / Horizontal / Bulletless / Without description or logo section
Rich list / Horizontal / Bulletless / Without description
Rich list / Horizontal / Bulletless / Without logo section
Rich list / Horizontal / Bulletless
Rich list / Horizontal / Minimal
Rich list / Horizontal / 50/50 Ordered
Rich list / Horizontal / Ordered
Rich list / Horizontal / 50/50 / Ticked
Rich list / Horizontal / Ticked
Rich list / Vertical / Bulleted / Flipped
Rich list / Vertical / Bulleted
Rich list / Vertical / Flipped
Rich list / Vertical
Rich list / Vertical / Minimal
Rich list / Vertical / Numbered / Flipped
Rich list / Vertical / Numbered
Rich list / Vertical / Ticked / Flipped
Rich list / Vertical / Ticked
Rule / Default
Rule / Fixed width
Rule / Highlight
Rule / Muted
Search and filter / Chips overflow
Search and filter / Default
Search and filter / Expanded
Search and filter / With chips
Search and filter / With search prompt
Search box / Default
Section / Deep
Section / Hero
Section
Section / Shallow
Segmented control / Default
Segmented control / Dense
Segmented control / Icons
Separator
Side navigation / Accordion
Side navigation / Application
Side navigation / Variants
Side navigation / Docs
Side navigation / Expandable
Side navigation / With icons
Side navigation / Raw HTML
Side navigation / Sticky
Slider / Input
Status labels / Default
Strip / Accent (deprecated)
Strips / Dark
Strip / Deep
Strips / Highlighted
Strip / Image (deprecated)
Strip / Bordered (deprecated)
Strip / Shallow
Strips / Dark (deprecated)
Strips / Light (deprecated)
Strips / Suru-topped (deprecated)
Strips / Suru (deprecated)
Strips / White (deprecated)
Suru / 50/50
Suru
Suru / Divider
Suru / Fan bottom
Suru / Pyramid left
Suru / Pyramid right
Suru / Fan top
Suru / Standalone
Switch
Tab Buttons (deprecated) / Default
Tab Buttons (deprecated) / Dense
Tab Buttons (deprecated) / Icons
Table of contents
Table of contents / Sections
Table / With colored rows
Table / Expanding
Table / Formatting
Table / With icons
Table / Mobile card
Table / Overflow
Table / Sortable
Tabs / Tabbed Content
Tabs / Navigation
Small caps text
Tiered list / 50/50 on desktop with description CTA
Tiered list / 50/50 on desktop with description
Tiered list / 50/50 on desktop with list item CTA
Tiered list / 50/50 on tablet with description
Tiered list / 50/50 on tablet without description
Tiered list / 50/50 with description / Without CTA
Tiered list / 50/50 with description
Tiered list / Full-width with description
Tiered list / Full-width with description
Tiered list / Full-width without description
Tooltips
Tooltips / Detached
Tooltips / Overridden theme / Dark
Tooltips / Overridden theme / Light

Utilities

Brochure site

Brochure site / 25/25/25/25 structure
Brochure site / 25/25/50 structure
Brochure site / 25/25/50 example
Brochure site / 25/75 nested
Brochure site / (25)/75 structure
Brochure site / (25)/75 example
Brochure site / 25/75 responsive structure
Brochure site / 25/75 structure
Brochure site / 25/75 example
Brochure site / 50/50 structure
Brochure site / 50/50 example
Brochure site / full page

Layouts

Application / JAAS
Application / Default
Application / Split view
Application / Structure
Documentation / Full width
Documentation / Brochure
Fluid breakout - cards with aside and toolbar
Fluid breakout - CVE table
Fluid breakout - main spanning 3 columns
Fluid breakout - aside on the left and toolbar
Fluid breakout - aside on the left
Fluid breakout - no aside
Fluid breakout - aside on the right
Full width (deprecated)
Full width / No sidebar (deprecated)
Full width / Default
Sticky footer

Templates

MAAS docs / Grid layout
MAAS layout
Responsive behaviours
Snapcraft publicise page
Forms / Tick elements
Typographic spacing
Vertical spacing
Z-index

Examples using standalone component CSS for testing/debugging

© 2025 Canonical Ltd.

Vanilla framework v4.24.1
Legal info
Report a bug
Manage your tracker settings

Go to the top of the page

Ubuntu and Canonical are registered trademarks of Canonical Ltd.