Buttons
Buttons have various different display options. Adjust size, icons, styles and palette. PS. This header has Extra Large prose style
Padrão buttons
PadrãoStyled buttons
Example of buttons using Join
Icon buttons
Stat
Exibições 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.
Imagem demo
Adds images to content. Define the width of your images.
Modal
A dialog overlay triggered by an action button, with configurable placement.
Cartão
Cartãos are used to group and display content in a way that is easily readable.
Cartão 1
Cartão 1 body
Cartão 2
Cartão 2 body
Cartão 3
Cartão 3 body
Cartão 4
Cartão 4 body
Cartão side
Exibição your card content with a supporting image on the left side of the card.
This is your card title
Cartão summary text
This is your card title
Cartão 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)
Alertas
Alerta informs users about success, information, warnings and errors.
Informação alert message goes here.
Success alert message goes here.
Error alert message goes here.
Warning alert message goes here.
Informação alert message goes here.
Informação alert message goes here.
Informação alert message goes here.
Informação 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
Exibição a list of logos.
Divider
Use the divider to separate content vertically.
Webform
Exibição
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.