EM0074 Typography
General Elements
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
- Bullet List 1
- Bullet List 1.1
- Bullet List 1.2
- Bullet List 1.3
- Bullet List 1.4
- Bullet List 2
- Bullet List 3
- Bullet List 4
- Number List 1
- Number List 1.1
- Number List 1.2
- Number List 1.3
- Number List 1.4
- Number List 2
- Number List 3
- Number List 4
- Definition title dt
- Defination description dd
- Definition title dt
- Defination description dd
Code tag: Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
block quote Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tables
Table with class .data-table
| THEAD TH | THEAD TH | THEAD TH | THEAD TH | THEAD TH |
|---|---|---|---|---|
| TBODY TD | TBODY TD | TBODY TD | TBODY TD | TBODY TD |
| TBODY TD | TBODY TD | TBODY TD | TBODY TD | TBODY TD |
| TBODY TD | TBODY TD | TBODY TD | TBODY TD | TBODY TD |
Custom CSS Classes
this is a paragraph with class .normal
this is a paragraph with class .primary
this is a paragraph with class .secondary
this is a paragraph with class .secondary2
tag small and class .small
element with class .underline
ul.none and ol.none:
- Bullet List 1
- Bullet List 1.1
- Bullet List 1.2
- Bullet List 1.3
- Bullet List 1.4
- Bullet List 2
- Bullet List 3
- Bullet List 4
ul.hoz and ol.hoz:
- Bullet List 1
- Bullet List 2
- Bullet List 3
- Bullet List 4
paragraph with class .box:
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraph with class .bottom always has margin-bottom = 0.
Add class .hide-lte2 to hide element when screen's width less than 1280px.
Add class .hide-lte1 to hide element when screen's width less than 980px.
Add class .hide-lte0 to hide element when screen's width less than 760px.
Icons
|
.icon.pack span.icon.pack |
.icon.text span.icon.text |
.icon.lock span.icon.lock |
.icon.cart span.icon.cart |
|
|
.icon.cart.large span.icon.cart.large |
.icon.tag.large span.icon.tag.large |
.icon.tag.pack span.icon.pack.large |
.icon.mail.large span.icon.mail.large |
|
|
.icon.facebook span.icon.facebook |
.icon.twitter span.icon.twitter |
.icon.googleplus span.icon.googleplus |
.icon.pinterest span.icon.pinterest |
.icon.feed span.icon.feed |
|
.icon.search span.icon.search |
.icon.tick span.icon.tick |
|||
|
.icon.flag.uk span.icon.flag.uk |
.icon.flag.us span.icon.flag.us |
.icon.flag.ca span.icon.flag.ca |
.icon.flag.fr span.icon.flag.fr |
.icon.flag.de span.icon.flag.de |
Brands
|
.brand-logo.mango span.brand-logo.mango |
.brand-logo.zara span.brand-logo.zara |
.brand-logo.levis span.brand-logo.levis |
.brand-logo.dior span.brand-logo.dior |
.brand-logo.forever21 span.brand-logo.forever21 |
.brand-logo.diesel span.brand-logo.diesel |
.brand-logo.ck span.brand-logo.ck |
.brand-logo.lacoste span.brand-logo.lacoste |
Logo
|
.custom-logo.paymentmethods span.custom-logo.paymentmethods |
.custom-logo.shippingmethods span.custom-logo.shippingmethods |
.custom-logo.norton span.custom-logo.norton |
image with class .fluid:
