Text Panel
It's useful for just a simple block of text with various formatting options. These are as follows...
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Paragraph text (this is the default text style if nothing is selected within 'Formats'). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Anchored paragraph text to allow linking from elsewhere
- Bullet (unordered) List - Item 1
- Bullet (unordered) List - Item 2
- Bullet (unordered) List - Item 3
- Indented I
- Indented II
- Indented III
- We're really indenting now!
- Ok, that's enough
- Numbered (ordered) list - Item 1
- Numbered (ordered) list - Item 2
- Indented...
- And again
Some italic text
Some bold text
This | Is | A | Big(ish) | Table | Example |
---|---|---|---|---|---|
Cell | Cell | Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell | Cell | Cell |
01234 | 01234 | 01234 | 01234 | 01234 | 01234 |
Yacht | Havens | Generic | Table | Style | Done |
Text and Image Panel (Regular)
This is an example of a text and image panel (regular layout). It can be used for a basic block of text with an accompanying image on the left-hand side (below on smaller screens). It's possible to add two CTA buttons directly beneath this text.
Text and Image Panel (Reversed)
This is an example of a text and image panel (reversed layout). It can be used for a basic block of text with an accompanying image on the left-hand side (below on smaller screens). It's possible to add two CTA buttons directly beneath this text.
Text and Small Image Panel (Regular)
This is an example of a text and small image panel (regular layout). It can be used for a basic block of text with an accompanying image on the left-hand side (below on smaller screens) that is visually smaller than the alternative Text and Image Panel. It's useful for smaller images and graphical, non-photographic elements. It's possible to add two CTA buttons directly beneath this text.
Text and Small Image Panel (Reversed)
This is an example of a text and small image panel (reversed layout). It can be used for a basic block of text with an accompanying image on the right-hand side (below on smaller screens) that is visually smaller than the alternative Text and Image Panel. It's useful for smaller images and graphical, non-photographic elements. It's possible to add two CTA buttons directly beneath this text.
Text with Intro Panel (Light)
This is a light themed version of the Text with Intro Panel. This panel is particularly useful for tables. You can also add two CTA buttons underneath the content.
Marina Berthing | Up to 6M | 6.1 - 7M | 7.1 - 12.1M | 12.2M + |
---|---|---|---|---|
Annual Marina Berth | £1,000 (flat rate) | - | £250 /m | £250 /m |
Summer 7 Dayboat Berth (7 months, 1 April to 31 October) |
- | £250 /m | £250 /m | £250 /m |
Winter Marina Berth (1 October to 31 March) |
- | £250 /m | - | £250 /m |
Text with Intro Panel (Medium)
This is a medium themed version of the Text with Intro Panel. This panel is particularly useful for tables. You can also add two CTA buttons underneath the content.
Text with Intro Panel (Dark)
This is a dark themed version of the Text with Intro Panel. This panel is particularly useful for tables. You can also add two CTA buttons underneath the content.
Marina Berthing | Up to 6M | 6.1 - 7M | 7.1 - 12.1M | 12.2M + |
---|---|---|---|---|
Annual Marina Berth | £1,000 (flat rate) | - | £250 /m | £250 /m |
Summer 7 Dayboat Berth (7 months, 1 April to 31 October) |
- | £250 /m | £250 /m | £250 /m |
Winter Marina Berth (1 October to 31 March) |
- | £250 /m | - | £250 /m |
Video Panel
This is a video panel. It accepts a link to any YouTube or Vimeo video. It's possible to display the video in full-width if you want it to span across the entire page. You can also add two CTA buttons beneath the video.
Image Gallery Panel
This is an Image Gallery panel. Useful for displaying a three-column grid (at desktop level) of enlargeable images in a slideshow format. You can also add two CTA buttons beneath the gallery.
Carousel Panel (Light)
This is a light themed default carousel panel. It allows you to include any number of slides with custom images, titles, descriptions and links.
Carousel Panel (Medium)
This is a medium themed default carousel panel. It allows you to include any number of slides with custom images, titles, descriptions and links.
Carousel Panel (Dark)
This is a dark themed default carousel panel. It allows you to include any number of slides with custom images, titles, descriptions and links.
Carousel Panel (Enlarged)
This is a dark themed default carousel panel with an enlarged centre slide. It allows you to include any number of slides with custom images, titles, descriptions and links.
Content Carousel Panel
This is a Content Carousel Panel. It is useful for linking directly to other content on the website and is not full-width. It also has an option to make the "active" slide larger for greater impact. It has a dark intro theme by default.
News Carousel Panel
Events Carousel Panel
Features Panel (Light)
This is a light themed Features Panel. It is useful for displaying a set of "features" as icons with a supporting title and text. This example lists out all of the available icons to date. You can also add two CTA buttons to the bottom of this panel.
-
Ashore
Ashore icon example
-
Bar 1
Bar 1 icon example
-
Bar 2
Bar 2 icon example
-
Berth
Berth icon example
-
Berths
Berths icon example
-
Bike
Bike icon example
-
Brokerage
Brokerage icon example
-
Car Hire 1
Car Hire 1 icon example
-
Car Hire 2
Car Hire 2 icon example
-
Chandlery
Chandlery icon example
-
Cleaning 1
Cleaning 1 icon example
-
Cleaning 2
Cleaning 2 icon example
-
Coffee 1
Coffee 1 icon example
-
Coffee 2
Coffee 2 icon example
-
Crane
Crane icon example
-
Dry Stack
Dry Stack icon example
-
Engineering
Engineering icon example
-
Facilities
Facilities icon example
-
Fuel 1
Fuel 1 icon example
-
Fuel 2
Fuel 2 icon example
-
Hoist
Hoist icon example
-
Laundry
Laundry icon example
-
Parking
Parking icon example
-
Recycle
Recycle icon example
-
Restaurant
Restaurant icon example
-
Secure
Secure icon example
-
Sewage
Sewage icon example
-
Slipway
Slipway icon example
-
Wifi
Wifi icon example
-
Winter Storage
Winter Storage icon example
Features Panel (Medium)
This is a medium themed Features Panel. It is useful for displaying a set of "features" as icons with a supporting title and text. This example lists out all of the available icons to date. You can also add two CTA buttons to the bottom of this panel.
-
Ashore
Ashore icon example
-
Bar 1
Bar 1 icon example
-
Bar 2
Bar 2 icon example
-
Berth
Berth icon example
-
Berths
Berths icon example
-
Bike
Bike icon example
-
Brokerage
Brokerage icon example
-
Car Hire 1
Car Hire 1 icon example
-
Car Hire 2
Car Hire 2 icon example
-
Chandlery
Chandlery icon example
-
Cleaning 1
Cleaning 1 icon example
-
Cleaning 2
Cleaning 2 icon example
-
Coffee 1
Coffee 1 icon example
-
Coffee 2
Coffee 2 icon example
-
Crane
Crane icon example
-
Dry Stack
Dry Stack icon example
-
Engineering
Engineering icon example
-
Facilities
Facilities icon example
-
Fuel 1
Fuel 1 icon example
-
Fuel 2
Fuel 2 icon example
-
Hoist
Hoist icon example
-
Laundry
Laundry icon example
-
Parking
Parking icon example
-
Recycle
Recycle icon example
-
Restaurant
Restaurant icon example
-
Secure
Secure icon example
-
Sewage
Sewage icon example
-
Slipway
Slipway icon example
-
Wifi
Wifi icon example
-
Winter Storage
Winter Storage icon example
Features Panel (Dark)
This is a dark themed Features Panel. It is useful for displaying a set of "features" as icons with a supporting title and text. This example lists out all of the available icons to date. You can also add two CTA buttons to the bottom of this panel.
-
Ashore
Ashore icon example
-
Bar 1
Bar 1 icon example
-
Bar 2
Bar 2 icon example
-
Berth
Berth icon example
-
Berths
Berths icon example
-
Bike
Bike icon example
-
Brokerage
Brokerage icon example
-
Car Hire 1
Car Hire 1 icon example
-
Car Hire 2
Car Hire 2 icon example
-
Chandlery
Chandlery icon example
-
Cleaning 1
Cleaning 1 icon example
-
Cleaning 2
Cleaning 2 icon example
-
Coffee 1
Coffee 1 icon example
-
Coffee 2
Coffee 2 icon example
-
Crane
Crane icon example
-
Dry Stack
Dry Stack icon example
-
Engineering
Engineering icon example
-
Facilities
Facilities icon example
-
Fuel 1
Fuel 1 icon example
-
Fuel 2
Fuel 2 icon example
-
Hoist
Hoist icon example
-
Laundry
Laundry icon example
-
Parking
Parking icon example
-
Recycle
Recycle icon example
-
Restaurant
Restaurant icon example
-
Secure
Secure icon example
-
Sewage
Sewage icon example
-
Slipway
Slipway icon example
-
Wifi
Wifi icon example
-
Winter Storage
Winter Storage icon example
Benefits Panel
-
What's this panel useful for?
If you need to create a multi-column layout of listed content, this will do the job!
-
Why should I use this panel?
It makes for a snappier alternative to a bunch of bulleted lists in a text-based panel.
-
How are the items ordered?
The items flow from left to right and wrap after the third item.
-
Is there a limit on how much text I can use?
Recommended limit is 4-5 lines of text per item. Any more than that and it could start to look a little unruly.
-
Is there a limit on how many items I can add?
No! Feel free to add as many as you need, but there's no need to be dropping War and Peace in here.
-
Can I add CTA buttons underneath this panel?
You sure can. Up to two buttons can be added, which will appear at the bottom.
Signpost Item 3
You can also add up to two call to action buttons for each item.
Form and Image Panel (Regular)
This is a form and image panel (regular layout). It's a bit like a text and image panel but with added form selection powers! It's recommended for use with short, single-column forms only.
Form and Image Panel (Reversed)
This is a form and image panel (reversed layout). It's a bit like a text and image panel but with added form selection powers! It's recommended for use with short, single-column forms only.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Team Member
This panel is useful for adding multiple team members to a page with short bios on each person.
Webcam Panel
This is a webcam panel. It accepts a webcam alias as provided by your webcam service provider. You can also add two CTA buttons beneath the webcam feed.
Map Panel
This is a Google Map panel. You are able to specify a latitude & longitude of the location you wish to display on the map. If you need to convert an address to lat/lon, this handy tool will help. You can also add two CTA buttons beneath the map.
Directory Panel
This is a directory panel, which can be used to build out a list of companies with their logo and accompanying contact details. It's also possible to hide the filters if it only contains a handful of companies. Use it anywhere!
- All
Company 1
Tel: 01234 567 890
Company 2
Tel: 01234 567 890
Company 3
Tel: 01234 567 890
Company 4
Tel: 01234 567 890
Company 5
Tel: 01234 567 890
Company 6
Tel: 01234 567 890
Company 7
Tel: 01234 567 890
Company 8
Tel: 01234 567 890