About Us
Styleguide
Outline of Concrete5 Styles, Blocks and Custom Templates available for Baugh & Weedon.
Explore the different block types below to learn about the styling options and custom templates available to customise your content.
Content
Using the Format dropdown and the styling buttons in the Content Block toolbar will give you the basic default styles from the stylesheet.
Headings
Headings are set up in a sliding scale to make content hierarchy clearer...
Heading 1
PLEASE NOTE: There should be only one Heading 1 per page which is set up by default in most templates.
Heading 2
Heading 3
Heading 4
Heading 5
Default Text...
The site uses Poppins font with a base size ranging from 16px to 20px depending on screen size. Basic styles for hyperlinks, for italics / emphasis and for bold text have already been set up in the style sheet.
Additional custom text styles are available using the Styles dropdown menu...
Lead Text - Emphasised text for introductory paragraphs.
Highlight Text - Brand coloured text to highlight content.
Small Text - Smaller text size for smallprint.
Muted Text - Lighter grey coloured text for a subtler effect.
Small Muted Text - Smaller text size and lighter grey colour for smallprint.
and for links in your content...
Button...
Outline Button...
Or for darker backgrounds...
Unordered List...
- List item
- List item
- List item
Ordered List...
- List item
- List item
- List item
"This is a very exciting quote"
Mr V. Important
For a styled version use the Horizontal Rule block...
Custom Templates
The format of a content block can be changed by applying a Custom Template.
Description (Content)
The Description template will display the page description on the page using the Lead Text style as an introduction. This has been included automatically on most templates but if you do not want to show the description you can edit this content block and add you own content.
This is the description of the page being displayed automatically
Panel (Content)
The Panel template will create a light grey panel to highlight your content. This also includes a curved bottom right corner...
This is a Panel
You can add any content in this box.
Like Lists...
- List Item
- List Item
- List Item
This is a Brand Panel
You can add any content in this box.
Like Lists...
- List Item
- List Item
- List Item
This is a Dark Panel
You can add any content in this box.
Like Lists...
- List Item
- List Item
- List Item
This is a Gradient Panel
You can add any content in this box.
Like Lists...
- List Item
- List Item
- List Item
This is a Box
You can add any content in this box.
This is a Brand Box
You can add any content in this box.
This is a Dark Box
You can add any content in this box.
This is a Gradient Box
You can add any content in this box.
File Download (File)
The default template will style the download link as a button like the Brochure Download button on Product pages...
Image Centre (Image)
The Centre template will align a smaller image to the center of your content...
Image Caption (Image)
The Caption template will add the title of your block as a caption beneath the image...
This is the Title added to my Image Block
Product Spec (HTML)
The Product Spec template will convert your Pipe Separated Values HTML block into a specification table with the first column as headings...
For example
Heading | Value 1 | Value 2
Heading | Value 1 | Value 2
Heading | Value 1 | Value 2
will displayed as
| Heading | Value 1 | Value 2 |
|---|---|---|
| Heading | Value 1 | Value 2 |
| Heading | Value 1 | Value 2 |
Transducer Spec (HTML)
The Transducer Spec template will convert your Pipe Separated Values HTML block into a specification table with the first row as headings...
For example
Heading | Heading | Heading
Value 1 | Value 2 | Value 3
Value 1 | Value 2 | Value 3
will displayed as
| Heading | Heading | Heading |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
Layouts
Layouts allow you to split areas up into separate columns to give you more flexibility arranging your content. Additional clases have been set up to allow you to style these layouts further. Click on the Column tab and choose Edit Layout Design to add modifier classes...