Structure
Defined and flexible core structure we can use on all or most pages.
core structure
page
main
container
Section structures
name_sec
When adding new sections to the page use Section-structure component. Unlink it and work with predefined structure.
Each section should get a contextual class name with _sec at the end.
We do not add any styles to this class. If you need to change background add utility class as combo. If you need to change theme, you can do so by changing the value of data-theme attribute added to each section.
name_con
+
container
Use contextual name matching section for a container and add _con at the end of the class name. Additionally add container as combo class.
If you need to change top and bottom padding, you can achieve that by tweaking those properties values.
name_head
This is the recommended way for naming divs that contain heading in each section. Add contextual name matching section and container class names, end up the class name with _head.
name_text
This is the recommended way for naming divs that contain any text elements. Add contextual name matching section and container class names, end up class name with _text. Use them if a custom styles are needed for a group of text elements—e.g. max-width, text alignment or color.
name_wrap
This is the recommended way for naming divs that help grouping elements—e.g. for building layouts (flex, grid, etc.). Add contextual name matching section and container class names, end up class name with _wrap. Add necessary display utility classes (flex, grid) as combo.
name_item
/
name_item_2
This is the recommended way for naming divs that are direct children of the name_wrap element. Add contextual name matching section and container class names, end up class name with _item. If you need to add any custom property to any of the items add _# (number) at the end.
Typography
Heading styles
HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overridden with classes. It is recommended to always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.
All heading styles should be applied to variables, that are connected to both HTML tags and classes. Feel free to add extra styles (such as allcaps), but only when absolutely necessary.
text-display
Display Heading
All H1 Headings
text-h1
H1 Heading
All H2 Headings
text-h2
H2 Heading
All H3 Headings
text-h3
H3 Heading
All H4 Headings
text-h4
H4 Heading
All H5 Headings
text-h5
H5 Heading
All H6 Headings
text-h6
H6 Heading
Paragraph & other text styles
Text classes are strictly used for font-size, line-height and weight. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color, font-weight, alignment or add decoration, in this case you can use theme attributes, stack combo classes or create spans.
All text sizes should be applied to variables, that are connected to both All Paragraphs HTML tag and other text classes. For other than sizes classes use variables as values for related properties.
all paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-huge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font weight
text-light
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line clamp
text-line-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-line-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-line-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-line-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text alignment
text-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Other text utilities
text-allcaps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-italics
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-indent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-balance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-pretty
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Rich text styles
Rich text element is very powerful. It helps with future content editing but has to be used in a smart way. That's why next to base .text-rich class we have created a few additional classes helping out filter out unwanted elements and bullet-proof the website.Use below listed classes to prevent client from adding unwanted elements in the places where they should not exist.
text-rich
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
text-rich-nomedia
Heading 1
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
text-rich-bullets
- Bullet 1
- Bullet 2
Color
Color utility classes.
Color-themes
theme-base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
theme-invert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Font-colors
We distinguish 3 text colors for each of the theme (3 for light and 3 for dark). Whenever you need to change color of any text element, use them as combo classes on top of custom created class. Adopt your colors to variables in "theme" group.
color-text-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-brand
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
theme-invert
Invert means the other than main theme applied. If main theme is light (the whole page light), then this content is a dark version. And the other way around.
color-text-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-text-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Background-colors
Similarly to font-colors, we also differentiate 3 background colors for each of the theme (3 for light and 3 for dark). Default background color comes from the "body" element but feel free to add background color utility class to any element you want to change. Remember about light/dark theme distinction.
Adopt your colors to variables in "theme" group. If any of the background makes the texts unreadable, feel free to add color property to the color-bg-* class so all texts inside have the appropriate color applied.
color-bg-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
theme-invert
Invert means the other than main theme applied. If main theme is light (the whole page light), then this content is a dark version. And the other way around.
color-bg-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
color-bg-5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Border-colors
color-bor-1
color-bor-2
color-bor-3
theme-invert
Invert means the other than main theme applied. If main theme is light (the whole page light), then this content is a dark version. And the other way around.
color-bor-1
color-bor-2
color-bor-3
Size
Size utility classes. This section includes all sorts of gaps, radius and the most common icon size classes.
Spacer component
spacer
Gap
gap-none
gap-inherit
gap-main
gap-small
gap-large
gap-huge
Row gap
gap-row-none
gap-row-inherit
gap-row-main
gap-row-small
gap-row-large
Border radius
radius="main"
radius="round"
radius="small"
radius="large"
Block
Block utility classes
Block utilitIES [BLOCK-]
block-top
block-center
block-bottom
Flex
Flex utility classes
Flex Horizontal [flex-row]
flex-row-left-top
flex-row-left-center
flex-row-left-bottom
flex-row-left-stretch
flex-row-center-top
flex-row-center-center
flex-row-center-bottom
flex-row-center-stretch
flex-row-right-top
flex-row-right-center
flex-row-right-bottom
flex-row-right-stretch
flex-row-between-top
flex-row-between-center
flex-row-between-bottom
flex-row-between-stretch
Flex Vertical [flex-col]
flex-col-left-top
flex-col-left-center
flex-col-left-bottom
flex-col-left-between
flex-col-center-top
flex-col-center-center
flex-col-center-bottom
flex-col-center-between
flex-col-right-top
flex-col-right-center
flex-col-right-bottom
flex-col-right-between
flex-col-stretch-top
flex-col-stretch-center
flex-col-stretch-bottom
flex-col-right-between
Other Flex Utilities
flex-row-wrap
flex-col-wrap
flex-child-grow
flex-child-shrink
flex-child-lock
flex-row-reversed
Grid
Grid utility classes
Grid utilities [grid-]
grid-custom
grid-breakout
grid-subgrid
grid-autofit
grid-autofill
mobile Grid [grid-tab-x]
Grid utility classes follow mobile first approach. When deciding on columns add and stack only necessary classes that change layout from lower to higher breakpoint.
E.g. If your layout needs 1 column on mobile, 2 columns on tablet, and 3 on desktop, add 2 classes only: .tab-2.desk-3
There's no need to add anything to mobile as by default the grid has 1 column only.
grid-mob-1
grid-mob-2
grid-mob-3
grid-mob-4
grid-mob-5
grid-mob-6
grid-mob-7
grid-mob-8
grid-mob-9
grid-mob-10
grid-mob-11
grid-mob-12
tablet Grid [grid-tab-x]
grid-tab-1
grid-tab-2
grid-tab-3
grid-tab-4
grid-tab-5
grid-tab-6
grid-tab-7
grid-tab-8
grid-tab-9
grid-tab-10
grid-tab-11
grid-tab-12
Desktop Grid [grid-desk-x]
grid-desk-1
grid-desk-2
grid-desk-3
grid-desk-4
grid-desk-5
grid-desk-6
grid-desk-7
grid-desk-8
grid-desk-9
grid-desk-10
grid-desk-11
grid-desk-12
Column utilities [col-]
col-custom
col-full
col-indent
mobile Column [col-mob-x]
col-mob-1
col-mob-2
col-mob-3
col-mob-4
col-mob-5
col-mob-6
col-mob-7
col-mob-8
col-mob-9
col-mob-10
col-mob-11
col-mob-12
tablet Column [col-tab-x]
col-tab-1
col-tab-2
col-tab-3
col-tab-4
col-tab-5
col-tab-6
col-tab-7
col-tab-8
col-tab-9
col-tab-10
col-tab-11
col-tab-12
desktop Column [col-desk-x]
col-desk-1
col-desk-2
col-desk-3
col-desk-4
col-desk-5
col-desk-6
col-desk-7
col-desk-8
col-desk-9
col-desk-10
col-desk-11
col-desk-12
Column order attributes
Order attributes are fully breakpoint related. They change element's order ONLY on a particular breakpoint.
order="desk-first"
order="desk-last"
order="tab-first"
order="tab-last"
order="mob-first"
order="mob-last"
Smart layouts
Smart layouts system classes for quick layouts composing. Choose how many columns your elements span based on grid-guidelines. You can add margins and custom column span for each breakpoint.
Grid guide based layout
Whenever you need or want to build layouts and position elements base on grid guidelines, simply add .grid-guide as combo class to your element and add custom width property with number of colums such element has to span.
If you need to move element so it starts from a particular column, add margin left: either auto or use custom value: calc(var(--column-width--2) + var(--grid-gap--main))
grid-guide
Visual
Image & video utility classes
Image element & utility classes
All images
image-wrap
image-contain
image-bg
Video element & utility classes
video-button
video
Aspect ratios
image-1x1
image-2x3
image-3x2
image-16x19
Other utilities
Other useful utility classes not classified.
Visibility (breakpoint specific)
Visibility of particular elements (or rather its lack) might be determined by adding [hide] attribute with value of breakpoint where we would like to hide element.
E.g. if you would like to hide any element on tablet and mobile breakpoints only, but make them be visible on others, simply add [hide="tablet, portrait"].
hide="desk"
hide="tab"
hide="mob"
Pointer
pointer-off
pointer-on
Position
position-static
position-relative
position-absolute
position-fixed
position-sticky
Overflow
overflow-visible
overflow-hidden
overflow-clip
overflow-left
overflow-right
overflow-scroll
overflow-auto
Other utilities
cms-empty
Card
card
card
elevation="animated"
Elevation (shadows)
Box shadow styles use attribute selector. Adjust each of the elevation variables in Global/Code Shadow component: .global_code_elevation embed.
Add shadow values to each variable and choose easing, timing and states for animated shadow.
elevation="1"
elevation="2"
elevation="3"
elevation="4"
elevation="animated"
Form
Styles for forms.
Input & labels
Both inputs' and labels' styles depend solely on variables. Choose appropriate sizes in variables panel and add colors for each theme (light and dark) in Global/Code -> color embed.
form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
form
data-theme="dark"
Invert means the other than main theme applied. If main theme is light (the whole page light), then this content is a dark version. And the other way around.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.