Styleguide inclusions
- Rich text heading 1
- Rich text heading 2
- Rich text heading 3
- Paragraph text
- Text links
- Bullet point lists
- Ordered (numbered) lists
- Block quotes
- Primary button
- Secondary button
- Hero heading/ Page title
- Row heading/ section heading
- Listing filter buttons
- Article metadata (date, author, category)
- Listing metadata (date, author, category)
- Breadcrumbs
- Tag/ category link list
- Navigation and Footer links
- Copyright text
- Image caption
- Labels
- Text input (single line text)
- Text area (multiline text)
- Select box (dropdown)
- Single Checkbox (e.g. accept terms checkbox)
- Checkbox list
- Radio buttons
- Validation/ error message
- Mandatory field marker
Key icons should be identified including:
- Search icon
- Back and Next arrow icons
- Pagination dots
- Common button icons
- Close icon
- Define interaction states and animation for common components.
- For button hover styles, consider https://ianlunn.github.io/Hover/ and simply direct which style is requested
- For clickable images, utilise hover zoom or overlay treatment effects
Consistent image sizes allow for great image re-use, easier content entry and a design clients won’t mess up. These sizes can be scaled based on application, but should align to a consistent width:height ratios.
For example, provide each image ratio at the maximum resolution it will be used:
- Extra wide landscape (full width hero or row backgrounds) 2000x600
- Content landscape 1200x600
- Content Square 600x600
- Content Portrait 600x1200
If certain images require a semi-transparent colour overlay or CSS treatment, define these here.