Buttons
Buttons have various different display options. Adjust size, icons, styles and palette. PS. This header has Extra Large prose style
Default buttons
DefaultStyled buttons
Example of buttons using Join
Icon buttons
Stat
Displays animated statistics counters to users, conveying essential information quickly and clearly. Use icons to communicate your message effectively at a glance, accompanied by slots to give more editor control.
Stats
Stats container used to group stats together in a bounding box.
Image demo
Adds images to content. Define the width of your images.
Modal
A dialog overlay triggered by an action button, with configurable placement.
Model content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.
Model content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.
Model content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.
Model content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.
Model content goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique pretium pellentesque semper enim aliquam.
Card
Cards are used to group and display content in a way that is easily readable.
Card 1
Card 1 body
Card 2
Card 2 body
Card 3
Card 3 body
Card 4
Card 4 body
Card side
Display your card content with a supporting image on the left side of the card.
This is your card title
Card summary text
This is your card title
Card summary text
Heading components
Heading allows you to structure your content by selecting from six levels of importance, ranging from a primary title (H1) to detailed sub-sections (H6)
Alerts
Alert informs users about success, information, warnings and errors.
Info alert message goes here.
Success alert message goes here.
Error alert message goes here.
Warning alert message goes here.
Info alert message goes here.
Info alert message goes here.
Info alert message goes here.
Info alert message goes here.
Accordions
Accordion is used for showing and hiding content but only one item can stay open at a time.
Accordion start 1
Accordion content goes here.
Accordion start 2
Accordion content goes here.
Accordion start 3
Accordion content goes here.
Accordion end 1
Accordion content goes here.
Accordion end 2
Accordion content goes here.
Badges
Badges are used to inform the user of the status of specific data
Sliders
Slider is a versatile tool used to create interactive, touch-friendly carousels that display images and content in a smooth, sliding layout.
Slider
Slider is a versatile tool used to create interactive, touch-friendly carousels that display images and content in a smooth, sliding layout.
Tabs
Tabs can be used to show a list of links in a tabbed format.
Tab A content goes here.
Tab B content goes here.
Tab C content goes here.
Videos
Embed remote videos from Youtube or Vimeo.
Logo Cloud
Display a list of logos.
Divider
Use the divider to separate content vertically.
Webform
Display
A set of reusable components for displaying a content preview.
Diff
The diff component shows a side-by-side comparison of two items. Use the scrubber UI to show/hide layered content.