Title
Every page should have a title at the top. It should clearly and uniquely describe the content on the page.
Variations
?
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Component used in
Details
Usage
The title component is mandatory for all web pages, except for the homepage.
Guidelines
- First component to be inserted in a HTML page
- Recommended character limits (including spaces): 75 characters for the title (
h1) - Make sure you create short but meaningful and unique titles. Two pages should never have the same title.
- Do not use PHP to load the title
- The variant with metadata is intended for automatic content only (e.g. speeches), please check with core team if you need the metadata.
- If the big hero image is mostly white and the top of the page containing the title does not contrast enough with the image, consider using the -shadowed modifier.
- Embedding and nesting are not allowed
HTML structure
Overall HTML view of a title component:
HTML file (.html)
div.title
ul (optional)
li (one or more)h1(other component(s))
Presets
Title presets:
| Preset | Description |
|---|---|
| Default | Normal title. |
Presets are ready to use HTML structures.
Variations
Title variations:
| Variation | Description |
|---|---|
| Title only | Normal title. |
| Title with metadata | The Metadata variant is intended for automatic content only (e.g. speeches), please check with core team if you need the metadata. The metadata can provide additional information to the user such as the publication category. |
Modifiers
Title classes:
| Class | Description |
|---|---|
-shadowed | If the big hero image is mostly white and the top of the page containing the title does not contrast enough with the image, consider using this modifier. Adds shadow to the top, left and right sides of the component container. |
-transparent | Gives transparency to the component container background. To be used solely in special pages. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The title component cannot be embedded inside another component.
main (HTML file)
(component)
div.titleNesting
The title component cannot be used as a container for other components and/or elements.
main (HTML file)
div.title
(Element)