Headers
Headers provides important information about the section.
Components
Block components consist of simple components (such as buttons, inputs, etc.) and used to build complex structures such as section components. You can combine different blocks to create unique sections.
HEBL is primary component name for header blocks, where HE - headers, BL - blocks and last 2 digits is a sequence number.
HEBL01 / Default
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL01 / Icon
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL01 / Overline
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL01 / button
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL01 / icon + button
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL01 / overline + button
Overline
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / Default
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / icon
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / overline
Overline
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / button
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / icon + button
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL02 / 5x
Overline
Title text
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
HEBL03 / default
Title text
Donec mattis ligula metus, ac mattis ligula sodales et. Quisque vulputate, justo eu efficitur lobortis, lorem ligula mollis metus, sed laoreet elit nisi sed ipsum. Morbi nec hendrerit lorem. Cras eget nulla non ante feugiat pulvinar. Suspendisse eget venenatis tortor, nec feugiat lectus.
HEBL03 / Icon
Title text
Donec mattis ligula metus, ac mattis ligula sodales et. Quisque vulputate, justo eu efficitur lobortis, lorem ligula mollis metus, sed laoreet elit nisi sed ipsum. Morbi nec hendrerit lorem. Cras eget nulla non ante feugiat pulvinar. Suspendisse eget venenatis tortor, nec feugiat lectus.
HEBL03 / Overline
Overline
Title text
Donec mattis ligula metus, ac mattis ligula sodales et. Quisque vulputate, justo eu efficitur lobortis, lorem ligula mollis metus, sed laoreet elit nisi sed ipsum. Morbi nec hendrerit lorem. Cras eget nulla non ante feugiat pulvinar. Suspendisse eget venenatis tortor, nec feugiat lectus.
How to
Add block components
Block components should be nested inside of parent wrapper and shouldn't be nested inside of any row, as they already have it. Just select and copy any component from the styleguide and paste them to your project. Or you can search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E).
Style components
Before making any changes you need to unlink component. Right-click on the symbol’s label and choose unlink from symbol. You can style components whatever you like.