Version 1.3
A 'Section' is 100% width and often used as the parent section for full width content or as a wrapper for various blocks, containers or elements
A 'Section wide' is 98% width and often used as the parent section for full width content or as a wrapper for various blocks, containers or elements
A 'Container' is 90% width in desktop and 94% in mobile of its parent section. It is used for blocks that are not full-width
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Note, grid turns into flex on 767. This is because grid children may use start/end columns and would require us to reset each one manually on mobile. By setting the parent to flex, those values are ignored.
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Note, grid turns into flex on 767. This is because grid children may use start/end columns and would require us to reset each one manually on mobile. By setting the parent to flex, those values are ignored.
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Note, grid turns into flex on 767. This is because grid children may use start/end columns and would require us to reset each one manually on mobile. By setting the parent to flex, those values are ignored.
Note, grid turns into flex on 767. This is because grid children may use start/end columns and would require us to reset each one manually on mobile. By setting the parent to flex, those values are ignored.
Change these values on the Global Root. It's best practice to map semantic variables such as --bg-body to another primitive variable such as --grey-1 or --brand-primary
For typography, similar to buttons the token are already bound with the correct CSS variable. For example token --text-5xl uses css variable --text-5xl which has underlaying CSS applied to it of font-size: 3.5rem. This means, you simply just use the tokens mapped to the > variables > mapped to the CSS. Tokens are being used instead of variables, because some of these tokens have combination of multiple variables and CSS properties. For example, the text-5xl token, uses two variables, one for font size and other for font family.
We must not use H1 to H6 tags to control the font sizing. Instead reserve them for SEO and content hierarchy purpose. To control the font sizes, we use typography tokens (text-5xl to text-xs) and have the freedom to apply H tags (H1 for example) to any font size.
A general Paragraph text you can edit that spans multiple lines can look like this. It uses token of text-m
blockquote text you can edit
console.log("Hello World");