Sitelet
https://vanillaframework.io/docs/examples
Jump to main content
Vanilla
Search
Menu
Docs
Examples
Accessibility
Browser support
Contribute
Search
Clear input
Submit
Component examples
Base elements
Button
Code block
Code - inline
Forms / Datalist
Forms / Disabled input
Forms / Fieldset
Forms / Base form
Forms / Input
Forms / Labels
Forms / Range input
Forms / Select multiple
Forms / Selects
Forms / Textarea
Forms / Tick Elements
Headings / Accented
Headings
Sub-headings
HR / Default
HR / Fixed width (deprecated)
HR / Muted (deprecated)
Lists / Definition List
Lists / Ordered List
Lists / Unordered List
Paper background / Inputs
Paper background / Search box
Table
Table / Empty
Typography / Abbreviation
Typography / Blockquote
Typography / Details
Typography / Font weights
Typography / Links
Typography / Pre
Typography / Small text
Typography / Strong text
Typography / Sub
Typography / Sup
Typography / Variable font
Components
Accordion
Accordion / Headings
Accordion / Tick elements
Article block
Article block / In grid
Article pagination
Badge / Chips
Badge / Colors
Badge / Default
Badge / Side Navigation
Badges / Tabs
Basic Section / Code Variants
Basic section / CTA variants
Basic section / Description variants
Basic section / Item padding
Basic section / Linked logo block
Basic section / Linked title
Basic section / List variants
Basic section / Logo block
Basic section / Media variants
Basic section / Mixed content
Basic section / Notification
Basic section / Padding variants
Basic section / Split layout
Basic section / Subtitle heading levels
Divided section / Top rule variants
Basic section / With label
Blog / Static contents / Custom fallback image
Blog / Dynamic contents / 3 blocks
Blog / Dynamic contents
Blog / Static contents / Mixed item inputs
Blog / Static contents / 3 blocks
Blog / Static contents
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 / Branded / Overriden theme
Chip / Branded
Chip / Colors (old)
Chip / Colors
Chip / Default (old)
Chip / Default
Chip / Dense
Chip / Inline
Chip / Link
Chip / Long values
Chip / Read-Only / Inline / Side navigation
Chip / Read-Only / Inline / Table
Chip / Read-Only
Chip / Variants
Chip / With Badge / With dismiss
Chip / With Badge
Chip / With Badge
Chip / Dismiss
Chip / With Icon / Read-only
Chip / With Icon
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
Card / 2-column no image
Card / 2-column card
Card / 4-column image top
Card / 4-column multiple chips
Card / 4-column no image
Card / 4-column card
Card / 6-column
Card / 8-column
Contextual menu / Default
Contextual menu / With indicator
CTA Block / Bordered
CTA Block / Borderless
CTA Block / Default
CTA section / 25-75 / With CTA block
CTA section / Full width / With CTA Block
CTA section / CTA block
CTA section / 25-75 / Links within text
CTA section / 25-75 / Default
CTA section / Full Width / Links within text
CTA section / Full width / Default
CTA section / Description block
Data spotlight / 2-blocks
Data spotlight / 3-blocks
Data spotlight / 4-blocks
Data spotlight / Linked title
Data spotlight / Without CTA and description
Data spotlight / Without CTA
Data spotlight / Without description
Data spotlight / Only statistics
Divided section / Bulleted list
Divided section / Default
Divided section / Description only
Divided section / Linked title
Divided section / Mixed items with bulleted headings
Divided section / Mixed items with numbered headings
Divided section / No bullets
Divided section / No description
Divided section / No headings
Divided section / Split layout responsive
Divided section / Status list
Basic section / Top rule variants
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 / 2 columns
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 / Highlighted images
Equal heights / 4 columns / Without CTA
Equal heights / 4 columns / Without description
Equal heights / 4 columns / No image
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 / 25/25/25/25
Grid / 25/25/50
Grid / 25/75 + 50/50 responsive
Grid / 25/75 on large
Grid / 25/75 on medium
Grid / 25/75
Grid / 50/50
Grid / 75/25 + 50/50 responsive
Grid / 75/25 on large
Grid / 75/25 on medium
Grid / 75/25
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 | CTA block
Hero | Description block
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
Hero / Chip on all variants
Hero / With Ubuntu Pro chip
Hero | Image block
Hero | Image block
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 / Explicit aspect ratio
Image Container / Cover / Explicit height
Image Container / Cover / Intrinsic aspect ratio
Image Container / Highlighted
Image / Shadow
Image / Spacing
In-page navigation / manual with optional heading
In-page navigation / manual
In-page navigation / Full-page
In-page navigation / Manual
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 block / Dark
Logo block / Dense
Logo block / Misaligned logos
Logo block in six-column parent container
Logo block / Lazyloaded
Logo block / Legacy square images
Logo block / Line breaks
Logo section / CTA block
Logo section / Default
Logo section / Linked title
Logo section / Minimal mode
Logo section / No CTA block
Logo section / No description and CTA block
Logo section / No description
Logo section / Padding variants
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
Newsletter signup | 2-col
Newsletter signup | 25-75
Newsletter signup | 4-col
Newsletter signup | 50-50
Newsletter signup | Col-x without newsletter block rule
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 / 1-block
Pricing block / 2-blocks
Pricing block / 3-blocks
Pricing block / 4-blocks
Pricing block / With description
Pricing block / With highlighted rule
Pricing block / With muted rule
Pull quote / Image
Pull quote / Default
Pull quote / Large
Pull quote / Small
Pull quote / Variants
Quote block / No signpost
Quote block
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 / Multiple quotes
Quote Wrapper / Small quote / No citation
Quote Wrapper / Small quote / No header
Quote Wrapper / Small quote / No signpost
Quote Wrapper / Small quote
Resources | Default
Resources | Linked title
Resources | Mixed images
Resources | Multiple authors
Resources | No categories and images
Resources | No categories
Resources | No description
Resources | No images
Resources | Section description
Resources | With CTA and description
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 / Media aspect ratios
Rich list / Vertical / Minimal
Rich list / Vertical / Numbered / Flipped
Rich list / Vertical / Numbered
Rich list / Vertical / Ticked / Flipped
Rich list / Vertical / Ticked
Rich list / Vertical / With auto-height media
Rich list / Vertical / With video
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
Tab section / 25/75 / Blog (single)
Tab section / 25/75 / Logos (single)
Tab section / 25/75
Tab section / 50/50 / Basic section (single)
Tab section / 50/50 / Blog (single)
Tab section / 50/50 / Divided (single)
Tab section / 50/50 / Logos (single)
Tab section / 50/50
Tab section / Full width / Blog (single)
Tab section / Full width / Custom heading level
Tab section / Full width / Linked logos (single)
Tab section / Full width
Tab section / Full width / Logos (single)
Tab section / Full width / Quote block (single)
Tab section / Full width
Tab section / Multiple tab sections
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 (legacy)
Table / Sortable
Tabs / Tabbed Content
Tabs / Navigation
Small caps text
Text spotlight | Default
Text spotlight | H4 styled items
Text spotlight / Links
Tiered list / 50/50 on desktop with description CTA
Tiered list / 50/50 on desktop with description
Tiered list / 50/50 on desktop with full width image after description
Tiered list / 50/50 on desktop with full width image before description
Tiered list / 50/50 on desktop with full width lite-youtube video
Tiered list / 50/50 on desktop with media hidden on small and medium breakpoints
Tiered list / 50/50 on desktop with full width video after description
Tiered list / 50/50 on desktop with full width video before description
Tiered list / 50/50 on desktop with image after CTA
Tiered list / 50/50 on desktop with image after description
Tiered list / 50/50 on desktop with image before description
Tiered list / 50/50 on desktop with list item CTA
Tiered list / 50/50 on desktop with media in list items
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
Tiered list / Muted top rule
Tooltips
Tooltips / Detached
Tooltips / Overridden theme / Dark
Tooltips / Overridden theme / Light
Utilities
Align paragraph, small, extra small text by baseline
Align / Content
Align / Text
Align / Vertical align
Animations / Spin
Baseline grid
Clearfix
Embedded media
Equal height
Fixed width container / Nesting
Fixed width container
Floats / All screens
Floats / Large screens
Floats / Medium screens
Floats / Small screens
Font metrics
Hide / Table columns
Hide
Image position / Bottom left
Image position / Bottom right
Image position / Bottom
Image position / Left
Image position / Right
Image position / Top left
Image position / Top right
Image position / Top
Margin collapse
Max-width unset
Muted text
No print
Off-screen
Padding collapse
Show
Table cell padding overlap
Table layout / Automatic / Nested
Table layout / Automatic
Text figures
Text max width / Container
Text max width / Divided
Text max width
Text / With icon
Truncate text
Vertical spacing by unit
Vertically center
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
