Guide Heroes
This section is a guide for content editors which contains a description of the way pages are build.
Heroes
Heroes are the headers of a page; but also thay can be used to break a page into multiple sections. Anything within the square brackets is the content.
[hero] ..content.. [/hero]
This is a hero!
This hero is a simple hero with a pink background, white text and height "large."
This is a hero!
This hero is a simple hero with a purple background, white text and height "medium."
This is a hero!
This hero is a simple hero with a grey background, white text and height "small."
Heroes can contain images as the background, just pass the attribute bg_image and the url; for example bg_image:https://learningonscreen.ac.uk/wp-content/uploads/2023/08/homepage-002.jpg
This is a hero!
This hero is a simple hero with an image background, white text and height "medium."
[hero height="medium" bg_color=primary-1 content_color=light bg_image=https://learningonscreen.ac.uk/wp-content/uploads/2023/08/homepage-002.jpg content_position=bottom content_bg_color=dark]
# This is a hero!
### This hero is a simple hero with an **image** background, white text and height "medium." {.intro}
[/hero]
Heroes have the following attributes:
| attribute | default value | accepted values |
|---|---|---|
| bg_color: | white | Predefined values are: "primary-1", "primary-2", "primary-3" OR any color given in the HEX or RGB form; for example: "#EC008C" or: "rgb(71,76,85)" |
| bg_image: | none | the url of the image. |
| bg_position: | center | |
| bg_size: | cover | |
| content_bg_color: | transparent | |
| content_color: | light | |
| content_position: | center | center, bottom |
| height: | small | small, medium, large |
| text_align: | left | left, center |