Website Content Guide
Welcome to the Alan Howard content hub, here you will find all of the available content types and their required sizes. These can be used across the whole site.
Full width image slider
Small (for mobile and small tablets):
Width: 767px | Height: 533px
Large (for laptop and desktop screens):
Width: 2000px | Height: 751px
Image Slider Component
Small (for mobile and small tablets):
Width: 737px | Height: 512px
Large (for laptop and desktop screens):
Width: 1140px | Height: 428px
Banner Component
Small (for mobile and small tablets):
Width: 737px | Height: 258px
Large (for laptop and desktop screens):
Width: 1140px | Height: 160px
Product Carousel Component
For product images the the ratio is always 1:1 (square). The minimum size we can accept is:
Width: 737px Height: 737px
Ideal size (for image zoom):
Width: 1200px Height: 1200px
Two Column Three Images Component
Large image to the left:
Width: 750px | Height: 503px
Small images to the right:
Width: 361px | Height: 236px
WYSIWYG Component
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. 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.
Three Column Component
Width: 737px | Height: 275px
Four Column Component
Width: 737px | Height: 737px
Recommendations Component
Image Carousel Component
Width: 200px | Height: 200px
Content Highlight Two Column Component
Width: 737px | Height: 737px
Content Highlight Four Column Component
Width: 390px | Height: 390px
Headers
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
Section Headers
h1 Section heading
h2 Section heading
h3 Section heading
h4 Section heading
h5 Section heading
h6 Section heading
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Free text
Lists
- Un-ordered list item
- Un-ordered list item
- Un-ordered list item
- Un-ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
- Ordered list item
Boxes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Buttons
Alerts
Forms
* Required fields are marked with an asterisk.
This is an error message
Basket Popup
Product Display Box
Product Line Box
Options:
Product line should be used for all product boxes so it uses the same styles and is consistent.
Popup Box
Styleguide Example Popup
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere mauris quis congue vehicula. Ut luctus commodo luctus. Duis gravida tortor nisi, eget varius velit varius quis. Aliquam bibendum euismod libero vel luctus. Nunc condimentum, augue nec auctor porttitor, eros lectus molestie lorem, a blandit nisl libero eget nisi. Aenean auctor tincidunt magna nec congue. Vestibulum vestibulum turpis et felis varius aliquam. In luctus a leo eu accumsan.
HTML Table
Column 1 | Column 2 | Column 3 |
---|---|---|
Column 1 Content | Column 2 Content | Column 3 Content |
Column 1 Content | Column 2 Content | Column 3 Content |
Column 1 Content | Column 2 Content | Column 3 Content |
Column 1 Content | Column 2 Content | Column 3 Content |
Div Table
Options:
cell-5 through to cell-100 to determine the width of the columns
table-div-fixed is used for table-layout: fixed instead of table-layout: auto
table-divided is used for the divider of the rows. Place on the table-div div.
cell-center & cell-right. Place on the cell-div div.
Accordion
Accordion 1
Content 1
Accordion 2
Content 2
Accordion 3
Content 3
Accordion 4
Content 4
Latest News Component
Main image:
Width: 1140px | Height: 590px