Layout and structure
Grid sizes
Break points
There are 4 groups for break points to cover off a wide range of devices that users may be viewing the website on. This helps to establish a basic set of rules for how layouts and components adapt at different screen sizes. The groups are divided as follows:
Page structure
This contains navigation components to help users find their way around the site. The header is more heavily restricted than the 'Body' elements as it is carried across mutliple pages.
Body header
This typically contains the introductory information on the page to give users an understanding of what's on offer. The body header can be used to promote a specific piece of information together with a call to action (CTA).
Body
This has a number of different layout options available to cater for a variety of content requirements and experiences. This is where the bulk of content is displayed and offers the most amount of design flexibility with a large number of components available for use. Body contains 4 different layout options with specific components available for use across a main 'Content' panel and a 'Side content' panel.
Body footer
This typically contains useful components like Signposts to help users choose where to go next.
Footer
This typically contains the RNLI's standard footer and is more heavily restricted than the 'Body' elements as it is carried across mutliple pages.
Layout and hierarchy
Component assignment
Header
- Navigation
- Sub-navigation
- Navigation link
- Supporting navigation
Body Header
Body
- One Column
- One Column Centred
- Two Column Left
- Two Column Right
Body Content
- Accordion
- Back Link
- Body
- Campaign info panel
- Campaign Map
- Content List
- Credit
- Date
- Date Range
- Dividing Line
- Events Listing
- Facts Slider
- Featured Slider
- Form
- Image (Landscape)
- Latest Launches
- Link
- Location Map
- Logo List
- Media Gallery
- Media Slider
- Quote
- Related Content
- RNLI Video
- Summary
- Tab
- Tabbed Slider
- Timeline
- Title
Body Side Content
- Quote
- Share Page
- Side Content Address
- Side Content Date Range
- Side Content Download Link
- Side Content Facts
- Side Content Get Directions Link
- Side Content Help
- Side Content Location Map
- Side Content Promo
- Side Navigation
Body Footer
- Campaign info panel
- Double promo
- Events Listing
- Hero Promo
- Logo List
- Related content
- Signpost
Footer
- Footer navigation
- Social links