Nordian Style Guide
This page has all styles and components that are used throughout the site. Careful: Editing anything here will affect the entire website.
Core Structure
Always use this structure when designing a new section. Follow the steps below or click here to see a tutorial.
1. Copy the blocks starting from section_[name] div and paste them inside your page
2. REMOVE the section_[name] class from the first div: DO NOT rename the section_[name] class, REMOVE it!
3. Create a new class with the name of your section (e.g. section_product-hero).
4. Insert a div inside padding-section div, and start building from there.
Typography Fixed
Adjusting the typography of the website so that it's according to Client-First and to Figma's Style Guide.
H1
Make sure to use the HTML tag.
Heading 1
H2
Make sure to use the HTML tag.
Heading 2
H3
Make sure to use the HTML tag.
Heading 3
H4
Make sure to use the HTML tag.
Heading 4
H5
Make sure to use the HTML tag.
Heading 5
Subheading 1
Make sure to use the HTML tag.
Heading 5
Subtitle 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.
Subtitle 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.
Typography - Paragraphs
Typograph classes for paragraphs.
Body 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.
Body 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.
Body 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.
Body 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.
Typography Global Combo Classes
Typography classes to add additional styles like colors or alignment.
Text alignment
Use text-alignment classes to align text.
text-align-center
text-align-center-on-breakpoint
text-align-left
text-align-right
Text color
Use text-color classes to change the color of text.
text-color-white
text-color-blue
Text weight
Use text-color classes to change the weight of the text.
text-weight-bold
text-weight-semibold
Paddings
Padding divs are used to control padding globally.
padding-global
This class is used to control horizontal padding. Add it in a div inside of a section. 90px left and right.
padding-section-large
This class is used to control vertical padding in sections. It comes in three sizes: large, medium and small.
padding-section-medium
This class is used to control vertical padding. 80px.
padding-section-small
This class is used to control vertical padding. 64px.
container-1260px
This classe is used to set a container width and max-width. width: 100%, max-width: 1260px.
Spacing Blocks
Spacing block is a class with nothing but padding applied to it. Apply a Spacing Block class to an empty div to add spacing between elements. Spacing Blocks are also responsive!
spacing-block-4px
spacing-block-8px
spacing-block-12px
spacing-block-16px
spacing-block-20px
spacing-block-24px
spacing-block-32px
spacing-block-48px
spacing-block-64px
spacing-block-72px
Spacing Wrappers (Deprecated)
Wrapper divs used to add margin to elements. To add, wrap another div and add the classes margin-bottom + margin-[size] to the wrapper div. Not fully implemented in the site yet.
Typography (Deprecated)
All text sizes used across the website. Careful! Some are still in use.
Heading 1
Combo classes: center
Heading 1
Heading 2
Combo classes: align center, compare, white
Heading 2
Heading 3
Combo classes: Compare, no space, tab, white
Heading 3
Heading 4
Combo classes: align left
Heading 4
Subtitle 1
Combo classes: clean, left, White
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.
Subtitle 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.
Body 1
Combo classes: align center, Black, centered, Sobre Nordian, Table
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.
Body 2
Combo classes: align left, clean
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.
Body 3
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.
Body 4
Combo classes: text-style-guide
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.
Body 5
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.
body 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.
Body 7
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.
Field Label
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.
Text Field
Combo classes: Empresa, Mensagem
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
accordion text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Div - Text Button
Text Block 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Block 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Block 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Block 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Block Download
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tab Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Block - Footer
Combo classes: Address, Center, Link, Nordian Inc, Title