EC System

Banners: Hero

Documentation • Demo

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": "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/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
  • Handle: @ecl/ec-component-banner--hero
  • Tags: molecule
  • Variants (2): Hero , Video
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-banner/ec-component-banner.twig