ECL Hero Banner

Downloads in past


7643.4.216 days agoa year agoMinified + gzip package size for @ecl/twig-component-hero-banner in KB


ECL Hero Banner
npm package: @ecl/twig-component-hero-banner
npm install --save @ecl/twig-component-hero-banner


  • "variant" (string) (default: 'primary') Variant of banner (can be 'primary', 'seconary, 'white', image','image-shade','image-gradient')
  • "title" (string) (default: '') Title of banner
  • "image" (string) (default: '') Image for banner (required for image banner type)
  • credit (string) (default: '') Credit for the image
  • "description" (string) (default: '') Description of banner
  • "centered" (bool) (default: true) Define if banner should be centered
  • "fullwidth" (bools) (default: false) Extends the banner to whole viewport when used inside the grid
  • "link" (associative array) (default: predefined structure) predefined structure for the Link component
  • "extraclasses" (optional) (string) (default: '') Extra classes (space separated)
  • "extraattributes" (optional) (array) (default: ) Extra attributes
- "name" (string) Attribute name, eg. 'data-test' - "value" (string) Attribute value, eg: 'data-test-1'


{% include '@ecl/hero-banner/hero-banner.html.twig' with {  
  title: 'EU Budget for the future',  
  description: 'The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.',  
  centered: true,  
  variant: 'image',  
  image: 'url/path-to-image',  
  credit: '© Copyright',
  link: {  
    link: {  
      label: 'Subscribe',  
      icon_position: 'after',  
    icon: {  
      path: 'path-to-the-icon-file',  
} %}