Style Guide
XSmall
@font-size__xs 10px (e.g copyright in footer)Small
@font-size__s 12px (e.g Footer links)Base
@font-size__base 15px (e.g Body copy, buttons, product listing titles, footer headings)Large
@font-size__l 18px; (e.g )X-Large
@font-size__xl 24px; (e.g PDP title)
@font-weight__light Gill Sans Light (e.g forms notes)@font-weight__regular Gill Sans Book (body copy)@font-weight__bold Gill Sans Medium (footer headings, form labels, product listing names)@indent__xs 5px;@indent__s 10px;@indent__m 16px;@indent__l 30px;@indent__xl 40px;
Primary theme colour (@theme__color__primary)
Secondary theme colour (@theme__color__secondary)
Theme Panel colour (@panel__background-color)
Border colour (@border-color__base)
Header Level 1 (Reduced mobile size)
This is body copy. Lorum ipsum pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies this is an inline link eget, tempor sit amet ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Header Level 2 (Reduced mobile size)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 1 (Reduced mobile size)
Header Level 2 (Reduced mobile size)
Header Level 3
Header Level 4
Header Level 5
Standout content goes here
"This is a blockquote. After traipsing round Garden centres and Nuseries, looking at the sad citrus on offer, I went on-line and found this site. I ordered a Lemon, Lime, Orange and Clementine for myself and an Orange for my buddy. They arrived today in excellent condition, good shaped little trees with glossy leaves... Excellent products. Excellent service. "
K. F. June 2016
| Lorum Ipsum | Lorum Ipsum | Lorum Ipsum |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
List of cookies we collect
The table below lists the cookies we collect and what information they store.
| Cookie Name | Cookie Description |
|---|---|
| FORM_KEY | Stores randomly generated key used to prevent forged requests. |
| PHPSESSID | Your session ID on the server. |
| GUEST-VIEW | Allows guests to view and edit their orders. |
| PERSISTENT_SHOPPING_CART | A link to information about your cart and viewing history, if you have asked for this. |
| STF | Information on products you have emailed to friends. |
| STORE | The store view or language you have selected. |
| USER_ALLOWED_SAVE_COOKIE | Indicates whether a customer allowed to use cookies. |
| MAGE-CACHE-SESSID | Facilitates caching of content on the browser to make pages load faster. |
| MAGE-CACHE-STORAGE | Facilitates caching of content on the browser to make pages load faster. |
| MAGE-CACHE-STORAGE-SECTION-INVALIDATION | Facilitates caching of content on the browser to make pages load faster. |
| MAGE-CACHE-TIMEOUT | Facilitates caching of content on the browser to make pages load faster. |
| SECTION-DATA-IDS | Facilitates caching of content on the browser to make pages load faster. |
| PRIVATE_CONTENT_VERSION | Facilitates caching of content on the browser to make pages load faster. |
| X-MAGENTO-VARY | Facilitates caching of content on the server to make pages load faster. |
| MAGE-TRANSLATION-FILE-VERSION | Facilitates translation of content to other languages. |
| MAGE-TRANSLATION-STORAGE | Facilitates translation of content to other languages. |
List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Accordion Example
Accordion Heading 1
Accordion Heading 2
Accordion Heading 3
Form Styles
<span class="icon-chevron-left"></span>// Example CSS
.my-arrow:before {
.merci-maman-icon-font();
content:''\e801";
}