Fundações
Cor | Color
Foundation colors is a set of variables that should be applied to elements classes. Update colors by selecting an element (style panel) or in the variables panel
Background color
Section classes and background utility classes are using variables to adjust background and font color of nested text elements.
Heading
Heading
Heading
Heading
Heading
Heading
Voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
A well-crafted typeface is more than just a collection of letters— it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
Espaçamentos | Spacing
Spacing styles such as margins, paddings, and gaps are using predefined set of REM-based variables and applied directly to component classes.
Set of variables used for grid and flex layouts.
Read docs
To keep spacing consistent, most of the text elements and components have spacing applied as margin or padding.
Headings embody the voice of a brand
Components
Botões | Buttons
Every type of buttons have 2 properties: color and size.
Text Button
Tags
Every type of tags have 2 properties: color and size.
Imagens | Images
By default image tag and image class have radius applied.
Avatar size can be adjusted with combo classes.
Icones | Icons
Formulário | Forms
Cards
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
Slider
Accordion
Dropdown
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- The rich text element allows you to create and format elements
- List First Level
- List Second Level
- List First Level
- A rich text element can be used with static or dynamic content.
- The rich text element allows you to create and format elements
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Divider
Dividers have two types: horizontal and vertical
