Hero (with icon)
A Hero component should only ever be used at the top of a page for hero content. In this example the corner shape is visible and there is the option to include a short paragraph plus an icon/small image.
The hero element has been limited so that only ONE hero component can be used on a single page. The other options available are:
- Hero (with Contact Form) - as per Contact page
- Hero (with Media) - include an image or video
- Hero (with Gradient) - for large image that bleeds fullscreen
- Hero (with Full Video) - as per Homepage
Intro Copy (with Media)
This component can be used when you have an important introduction on the page which needs to sit alongside an image or video.
If you would like to make use of the video hover effect then please upload both a placeholder image and video link. The placeholder image ideally should be the first frame of the video.
Intro Copy (with Callout)
This is a subheading, a longer paragraph is ideal to call out here
This Content block allows you to add a full supporting paragraph, plus an image to sit alongside it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas elit id diam ultrices, viverra lacinia dolor tempor. Quisque sodales arcu nulla, vitae sollicitudin mauris tincidunt vel.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Normal text used for a paragraph ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas elit id diam ultrices, viverra lacinia dolor tempor. Quisque sodales arcu nulla, vitae sollicitudin mauris tincidunt vel. Donec viverra eros vel sagittis facilisis. Fusce accumsan diam ut nulla iaculis viverra. In vulputate dui ullamcorper porttitor porttitor.
- Bullet point list 1
- And another bullet point
- Plus one more bullet
"This is an example of a quote and what it's styling looks like in the WYSIWYG editor"
John Smith, A Worker
Images
For best results with images across the site it is recommended that images are uploaded as 16:9 (widescreen) dimensions. These images should be optimised as much as possible so that page load times aren't impacted and the website performs well. We recommend the use of https://tinypng.com/ which will compress your images for web.
Content (Row)
The Content (Row) component should be used when you want content to sit alongside an image. There is the option to include a CTA link. You can also choose if you want a white/black background and the image positioned left/right.
Content (Row)
The Content (Row) component should be used when you want content to sit alongside an image. There is the option to include a CTA link. You can also choose if you want a white/black background and the image positioned left/right.
Label Print Apply
Industry Uses: Food | Beverages | Pharma | Hardware | Automotive | Aerospace | e-commerce
Ideal For: Shrink wrap | Cases | Cardboard | Wood | Film
Spare Parts
Available For: Ice | Zebra
Clearmark Charity Week
Date: 15 - 19 June 2020
Location: Clearmark, Olympic House
Content (One Column)
Use this component when you want a single block of copy on the page. The line length has been fixed to a set width in the page grid, for optimum readability. This component uses a standard WYSIWYG so you can add different heading sizes, bold, italic, bullet points and hyperlinks.You can also include images and video here too.
Content (Two Columns)
Use a smaller heading size for a sub heading
Use this component when you want two columns of copy on the page. This component uses a standard WYSIWYG so you can add different heading sizes, bold, italic, bullet points and hyperlinks. You can also include images and video here too.
Use a smaller heading size for a sub heading
Use this component when you want two columns of copy on the page. This component uses a standard WYSIWYG so you can add different heading sizes, bold, italic, bullet points and hyperlinks. You can also include images and video here too.
Content (Two Columns)
You can also use this component on a light blue background if preferred.
There is the option to include an image in the right column, plus an optional CTA link.
Content (with Featured Image)
This component is great when you want to call out a piece of content or have a larger image that stretches to the edge of the browser and have more prominence on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas elit id diam ultrices, viverra lacinia dolor tempor. Quisque sodales arcu nulla, vitae sollicitudin mauris tincidunt vel. Donec viverra eros vel sagittis facilisis. Fusce accumsan diam ut nulla iaculis viverra. In vulputate dui ullamcorper porttitor porttitor.
Content (with Media)
Use this component when you have some copy that you want to sit alongside an image or video.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas elit id diam ultrices, viverra lacinia dolor tempor. Quisque sodales arcu nulla, vitae sollicitudin mauris tincidunt vel. Donec viverra eros vel sagittis facilisis. Fusce accumsan diam ut nulla iaculis viverra. In vulputate dui ullamcorper porttitor porttitor.
Content (with Form)
'Border/Dark Text' form on Light Blue background colour
In this component you can select which form you would like to display. Different forms have been set up with different styling. In this example you can see the 'Border/Dark Text' form has been selected. This sits better on the Light Blue background colour.
Content (with Form)
'No Border/Dark Text' form on Light Blue background colour
In this component you can select which form you would like to display. Different forms have been set up with different styling. In this example you can see the 'No Border/Dark Text' form has been selected. This sits better on the Light Blue background colour.
Content (with Form)
'No Border/White Text' form on Blue Gradient background colour
In this component you can select which form you would like to display. Different forms have been set up with different styling. In this example you can see the 'No Border/WhiteText' form has been selected. This sits better on the Blue Gradient background colour.
Awards Slider
In the Awards Slider below you just need to select multiple Awards that have previously been created within Entries. You can drag and drop to change the ordering of these in the slider.
Testimonial Slider
In the Testimonial Slider below you just need to select multiple Testimonials that have previously been created within Entries. You can drag and drop to change the ordering of these in the slider.
Gallery Slider
In the Gallery Slider below you just need to add multiple 'slides' each with an image added from the asset library. There is an option to add a caption to the image if you want to explain the product on display, for example. It is recommended that this caption is kept small for best results, especially on small screens and mobile devices.
Image Gallery
In the Image Gallery below you just need to add multiple images to the component. These are displayed in multiples of 5 so it's a good idea to upload multiples of 5 images into this component, to avoid duplicates showing at the same time. It is recommended that no more than 20 images are uploaded to this component so that page load times and web performance aren't negatively impacted.
CTA Strip
The CTA Strip component is useful when you need a section with a clear CTA for an onward journey. You can include multiple links if necessary with the option to link to an internal page, external URL, phone number, email etc. It is recommended that any external links are set to open in a new window.
Quick Links Strip
The Quick Links Strip is usually placed at the top of a page (below the hero) and can be used to add quick links that jump the user down the page to a section of content. Keep in mind the width of the page so that too many links aren't added into this strip. There is room for 2 call out CTAs on the right of the strip.
To set the link ID (#) of a content section that you want to link to, you will notice in the component that there is a tab called 'Meta'. This is where you can give the component an Anchor ID. Do not use spaces in this ID.
Then, within the Quick Links Strip component you can add this anchor ID to the Link URL. Remember to include a hashtag (#) at the beginning.
Benefits
Benefit number one
Another benefit here
Resources
Entries (Three Columns
Entries (Four Columns)
Accordion example
Although this component is titled FAQs, which is what it was originally intended for, it can also be used for any content that you wish to put into an accordion where content can be expanded/closed.
Question
Your answer can be formatted using the standard WYSIWYG where you can add headings, bold, italics, bullet points, hyperlinks etc. You can also add an image or video if needed too.
Multi Columns
This component is intended to insert columns that link to products. You can either link to product entries or categories. You can have up to 4 columns in this component. If you only choose 2 products then this will be formatted appropriately into 2 columns. Similarly if you select 3 then you will see 3 columns.
Eagle
Zodiac HS
Falcon
Featured Content
In this component you can select an existing news article or success story to pull through onto the page. See below...
Latest News:
Clearmark wins "Innovative Ancillary Equipment" PPMA award
Product Categories Block
This is the component that is used on the Product overview page and has been specifically designed for that page.
Thermal transfer
Label Print Apply
Statistics (with Image) component 100
Numbers only so this can be animated 3145
Another statistic 82644
Maximum stats recommended 4
Varied Row
The Varied Row component has a lot of customisations to suit your content.
There are a number of optional fields:
- Year
- Icon
- Link
- Image
The year field is set up for the History page, however this could be used for a numbering system (1, 2, 3) or months (May, June, July).
It is recommended that either the Year or Icon fields are populated, rather than both together.
There is also the option to choose between background colours - white, black or blue. And you can choose to have the image spread to the edge of the browser, or be contained within the grid of the website.
Dark background with extended image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate aliquet nisl dignissim sollicitudin. Donec ut dui fermentum, finibus ante nec, imperdiet libero. Aliquam et posuere justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ullamcorper leo lacus, nec pretium velit efficitur eu.
Blu background with contained image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate aliquet nisl dignissim sollicitudin. Donec ut dui fermentum, finibus ante nec, imperdiet libero. Aliquam et posuere justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ullamcorper leo lacus, nec pretium velit efficitur eu.
Careers Grid automatically pulls through Job entries
There are no active jobs currently
Stylised Form
Map Block
WILLOW DRIVE,
SHERWOOD BUSINESS PARK,
NOTTINGHAM,
NG15 0DP
You can add this map block to any page on the site where you would like to show your visitors the location of your Clearmark offices. All you need is the Lat and Lng coordinates from Google maps.
Training Days
This component automatically pulls in your training day entries.
10th June 2021
Product Training (Any Product or Software)
11th June 2021
Product Training (Any Product or Software)
Past Exhibitions will automatically pull in articles with 'exhibitions' tag.
Clearmark to Bring ROI Boosting ICE Vulcan Labeller to BeerX
2 Mar 2020
Clearmark wins "Innovative Ancillary Equipment" PPMA award
23 Oct 2019
Clearmark showcasing range of coding solutions at PPMA TOTAL 2019
1 Sep 2019
Grid Block
You can use this component to create a grouping of content blocks, each with an optional icon and link.
