UI/UX
typography
Headline 1 - H1
class: title-mega
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 2 - H2
class: title-big
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 3 - H3
class: title-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 4 - H4
class: title-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 4.1 - H4
class: title-small bold heavy
Lorem ipsum dolor sit amet, consectetur adipiscing elit.(bold)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.(heavy)
Headline 5 - H5
class: title-extra-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 5.5 - H5
class: title-extra-small bold heavy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (bold)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (heavy)
Headline 6 - H6
class: title-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline 7/6.1 - H6
class: super-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body copy / Paragraph
Default/Paragraph 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 1.2
class: type-1-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 2
class: type-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 2-1
class: type-2-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 3
class: type-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 3.1
class: type-3-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Paragraph 4
class: type-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Helpers
Futura PT Light - this can be applied to any text container
class: futura-pt-light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Futura PT Book - this can be applied to any text container
class: futura-pt-book
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Futura PT Heavy - this can be applied to any text container
class: futura-pt-heavy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Futura PT Bold - this can be applied to any text container
class: futura-pt-Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Text align left - this can be applied to any text container
class: text-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Text align center - this can be applied to any text container
class: text-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Text align right - this can be applied to any text container
class: text-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
Text dark - this can be applied to any text container
class: text-dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
You can also apply this background color by adding a div with a class background-light around your content
Text ligh - this can be applied to any text container
class: text-light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus. Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.
You can also apply this background color by adding a div with a class background-light around your content
Lists
- Curabitur in consequat dui, quis rhoncus augue.
- Nunc tristique ligula mauris, a malesuada ligula pulvinar at.
- Integer tincidunt, tellus in varius fringilla, neque nibh ultrices felis, non fringilla nisi sem quis ex.
- Vestibulum convallis eros metus, ac fringilla nunc volutpat at.
- Praesent vitae turpis faucibus, laoreet ligula et, maximus tellus.
Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Icons
Buttons Primary
button and input class: primary
anchor tag class: btn primary
Add to basket Remove from basket Remove from basketButtons Secondary
button and input class: secondary
anchor tag class: btn secondary
Add to basket Remove from basket Remove from basket
Form Fields