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: 'ec' } %}
{
"type": "video",
"video": {
"src": "https://ec.europa.eu/avservices/play.cfm?ref=I101631",
"is_iframe": true,
"ratio": "16-9",
"caption": "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit"
},
"description": "\n <p class=\"ecl-paragraph\">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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n <p class=\"ecl-paragraph\">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>\n <p class=\"ecl-paragraph\">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}
<div class="ecl-banner ecl-banner--video">
<div class="ecl-row">
<div class="ecl-col-lg-6">
<div class="ecl-banner__video">
<section class="ecl-file ecl-file--video">
<div class="ecl-u-ratio-16-9">
<iframe class="ecl-file__video" src="https://ec.europa.eu/avservices/play.cfm?ref=I101631" allowfullscreen="allowfullscreen" scrolling="no"></iframe>
</div>
<div class="ecl-file__caption">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>
</section>
</div>
</div>
<div class="ecl-col-lg-6">
<p class="ecl-paragraph">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 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="ecl-paragraph">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="ecl-paragraph">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
-
Content:
/** * Banners component * @define banner */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-banner/generic-component-banner'; // Check if overridden dependencies are already loaded, if needed @include check-imports( ( 'ec-style-typography-heading', 'ec-style-typography-paragraph', 'ec-style-image' ) ); // Use generic mixin @include exports('ec-component-banner') { @include ecl-banner(); } - URL: /components/raw/ec-component-banner/ec-component-banner.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-banner/ec-component-banner.scss
- Size: 459 Bytes