Using component templates
Introduction
Component templates are used to determine the layout of a component on the page. When you’re adding a component to a web page you must assign a template to it.
In basic terms, a template gives a component a set of instructions on how to display itself.
There are currently 53 component templates used in LTS. This includes a complete set of general templates for layout and a few specialised ones too.
The following information relates to the most common type of component - the generic content component, used to put text onto pages.
Naming components - in brief
Each template is named with specific parameters which allow for the different layouts.
An example of how a component template is named is: Main: Comp: 1 Col: Img L: Bg On.
Main means it will be used in the main central section of the page.
Comp stands for 'component'.
1 Col means it uses one whole column's width to display itself. See the 1-column templates page for an explanation.
Img L means the image will sit to the left of the component.
Bg On means that a background colour will be used when the component displays. The background colours used are different from site to site, and are chosen to complement the site's design colour.
The following pages in this section show examples of a selection of component templates and how they can be used.
Overview of all generic content component characteristics
This table shows a breakdown of the most common generic content component template characteristics and gives a definition of what they do.
| Page area | |
|---|---|
| Main | Displays components in the Main area of the page. |
| Int | Displays components in the Interactive area of the page. |
| Column split | |
| 1 Col | Displays the component across the entire width of the page area. |
| 2 Col | Displays the component across a half of the width of the page area. |
| 3 Col | Displays the component across a third of the width of the page area. |
| 4 Col | Displays the component across a quarter of the width of the page area. |
| Image position | |
| Img L | Displays component image to the left of the title and text. |
| Img R | Displays component image to the right of title and text. |
| Img T | Displays component image above the title and text. |
| Img B | Displays component image below the title and text. |
| Background state | |
| Bg Off | Displays component with no background colour. |
| Bg On | Displays component with background colour. |
| Specialised | |
| QL | Used specifically to lay out a list of hyperlinks (Quick Links) on a page. |
| Quote Box | Displays component in the form of a quote. |
| Block: Start | Used to start a column of text in the interactive column. Use with the Block: Finish template. |
| Block: Finish | Used to indicate that a column of text has finished. Use with the Block: Start template. |
| Main: Layout: Column Start | Used to lay out components in a 'newspaper column' fashion, such as on the NQ Sharing practice page. |
| Main: Layout: Column Finish | Used with the Main: Layout: Column Start template. |