Banner
Why use this component
The banner is used for optional, mainly promotional material. The content presented varies with the purpose of the site: it can be relevant news about the site or specific site-links.
Type of banners
Hero banner
Is a large web banner image, prominently placed on a web page, generally at the top.
The hero banner is often the first visual a visitor encounters on the site; it presents an overview of the site’s most important content.
It consists of :
- image
- title with a link
- description
Video Banner
It consists of :
- audiovisual material (image or video)
- paragraph
When to use this component
Hero banner
- should be the first element on the content area of the page
Video banner
- within the content area of the page, at the top, bottom, or between blocks of content
Do not use this component
- do not use more than one hero banner per page
{#
Parameters:
- "type" (string, "hero" or "video") (default: "hero"): type of banner
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
- "system" (string) (default: "generic")
If "type"=="hero":
- "image" (string) (default: ''): path to the background image
- "title" (string) (default: '')
- "href" (string) (default: '')
If "type"="video":
- "video" (object): context for @ecl/generic-component-file (with "variant"="video")
#}
{% include '@ecl/generic-component-banner' with { system: 'eu' } %}
{
"type": "hero",
"image": "../../assets/demo_images/nature-demo-1.jpg",
"title": "White Paper on the future of Europe",
"href": "../../example.html#hero-banner",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."
}
<div class="ecl-banner ecl-banner--hero">
<img class="ecl-image ecl-image--fluid ecl-banner__image" src="../../assets/demo_images/nature-demo-1.jpg" role="presentation" />
<div class="ecl-banner__content">
<h3 class="ecl-heading ecl-heading--h3 ecl-banner__title">
<a class="ecl-link ecl-link--standalone" href="../../example.html#hero-banner">White Paper on the future of Europe</a>
</h3>
<p class="ecl-paragraph ecl-banner__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
-
Content:
/** * Banners component * @define banner */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-banner/generic-component-banner'; // Check if overridden dependencies are already loaded, if needed @include check-imports( ( 'eu-style-typography-heading', 'eu-style-typography-paragraph', 'eu-style-image' ) ); // Use generic mixin @include exports('eu-component-banner') { @include ecl-banner(); }
- URL: /components/raw/eu-component-banner/eu-component-banner.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-banner/eu-component-banner.scss
- Size: 459 Bytes