Website Style Guide
This is a guide to the global styles on the TileShop.com website. Note that any individual template or component can override these styles as needed.
Colors
(#3d3935)
(#fff)
(#efeeef)
(#333)
and lots more...
Fonts
Lato is the main font. Available in font weights: 300, 400, 700, 900
BemboStd is another font that is on the website.
BemboStd-Italic is another font that is on the website.
BemboStd-Semibold is another font that is on the website.
BemboStd-SemiboldItalic is another font that is on the website.
BBemboStd-BoldItalic is another font that is on the website.
BemboStd-ExtraBold is another font that is on the website.
BemboStd-ExtraBoldItalic is another font that is on the website.
BemboTitlingMTStd is another font that is on the website.
BemboTitlingMTStd-Italic is another font that is on the website.
Font awesome is also used for font icons Instagram Pinterest Houzz
Typography
Normal Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. BOLD TEXT sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ITALIC TEXT quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-- Headlines --
Note that the headline sizes change between desktop and mobile.
Default Headline Styles
Heading 1 Lorem ipsum dolor sit amet.
Heading 2 Lorem ipsum dolor sit amet
Heading 3 Lorem ipsum dolor sit amet
Heading 4 Lorem ipsum dolor sit amet
Heading 5 Lorem ipsum dolor sit amet
Styled Headline Styles
Heading Jumbo Lorem ipsum dolor sit amet.
Heading 1 Lorem ipsum dolor sit amet.
Heading 2 Lorem ipsum dolor sit amet
Heading 3 Lorem ipsum dolor sit amet
Heading 4 Lorem ipsum dolor sit amet
Heading 5 Lorem ipsum dolor sit amet
Styled Alt Headline Styles
Heading Jumbo Alt Lorem ipsum dolor sit amet.
Heading 1 Alt Lorem ipsum dolor sit amet.
Heading 2 Alt Lorem ipsum dolor sit amet
Heading 3 Alt Lorem ipsum dolor sit amet
Heading 4 Alt Lorem ipsum dolor sit amet
Heading 5 Alt Lorem ipsum dolor sit amet
Heading 2 Lorem ipsum dolor sit amet
Heading 3 Lorem ipsum dolor sit amet
Heading 4 Lorem ipsum dolor sit amet
Heading 5 Lorem ipsum dolor sit amet
Styled Alt Headline Styles
Heading Jumbo Alt Lorem ipsum dolor sit amet.
Heading 1 Alt Lorem ipsum dolor sit amet.
Heading 2 Alt Lorem ipsum dolor sit amet
Heading 3 Alt Lorem ipsum dolor sit amet
Heading 4 Alt Lorem ipsum dolor sit amet
Heading 5 Alt Lorem ipsum dolor sit amet
Heading 5 Lorem ipsum dolor sit amet
Styled Alt Headline Styles
Heading Jumbo Alt Lorem ipsum dolor sit amet.
Heading 1 Alt Lorem ipsum dolor sit amet.
Heading 2 Alt Lorem ipsum dolor sit amet
Heading 1 Alt Lorem ipsum dolor sit amet.
Heading 2 Alt Lorem ipsum dolor sit amet
Heading 3 Alt Lorem ipsum dolor sit amet
Heading 4 Alt Lorem ipsum dolor sit amet
Heading 5 Alt Lorem ipsum dolor sit amet
-- Links --
This is an inline link
Text Hyper Links
Normal | Small | Large |
Action Buttons
Normal | Small | Large |
Disabled
Default button Styles (Not to be used)
Default Button
(should not be used)
(should not be used)
(should not be used)
Breakpoints
Mobile = - 0-767px
Tablet = 768-991px
Desktop = 992-1199px
(not shown) XL Desktop = 1200px+
Note: individual components may use additional breakpoints, but this is the recommended values