templates/default/components/molecules/banner/banner.html.twig line 1

Open in your IDE?
  1. {% import 'macros/storyblok.html.twig' as storyblok %}
  3. {% set bannerModifiers = '' %}
  4. {% if bannerStyle is defined %}
  5. {% set bannerModifiers = bannerModifiers ~ ' banner--' ~ bannerStyle %}
  7. {% if bannerStyle == 'content-box' %}
  8. {% set bannerHeadlineModifier = ' headline--background' %}
  9. {% endif %}
  10. {% endif %}
  11. {% if invertColor is defined and invertColor == true%}
  12. {% set bannerModifiers = bannerModifiers ~ ' banner--invert' %}
  13. {% endif %}
  14. {% if overlay is defined and overlay == true%}
  15. {% set bannerModifiers = bannerModifiers ~ ' banner--overlay' %}
  16. {% endif %}
  17. {% if button is defined %}
  18. {% set button = button|map((buttonItem) => buttonItem|merge({ text: buttonItem.label|default(buttonItem.text|default('')) })) %}
  19. {% endif %}
  21. {% set inner %}
  22. <div class="banner__background">
  23. <div class="banner__image">
  24. {# atoms/image #}
  25. {{ render_storyblok(banner, {
  26. class: 'banner__img-element image__src--cover',
  27. objectFit: 'cover'
  28. }) }}
  29. </div>
  30. <div class="banner__image-overlay"></div>
  31. </div>
  32. <div class="banner__inner">
  33. <div class="banner__content">
  34. {% if headline is defined %}
  35. <div class="banner__headline">
  36. {# atoms/headline #}
  37. {{ render_storyblok(headline, {
  38. class: 'headline--no-spacing' ~ bannerHeadlineModifier|default,
  39. }) }}
  40. </div>
  41. {% endif %}
  43. {% if subheadline is defined %}
  44. <div class="banner__subheadline">
  45. {# atoms/headline #}
  46. {{ render_storyblok(subheadline, {
  47. class: 'headline--no-spacing',
  48. }) }}
  49. </div>
  50. {% endif %}
  52. {% if description is defined %}
  53. <div class="banner__description">
  54. {# atoms/paragraph or molecules/text-list #}
  55. {{ render_storyblok(description, {
  56. class: 'banner__text',
  57. }) }}
  58. </div>
  59. {% endif %}
  61. {% if button is defined %}
  62. {% if button|length > 1 %}
  63. {% for buttonItem in button %}
  64. <div class="banner__action">
  65. {{ render_storyblok(buttonItem) }}
  66. </div>
  67. {% endfor %}
  68. {% else %}
  69. {% set buttonclean = button|first %}
  70. <div class="banner__action">
  71. {{ render_storyblok(buttonclean, {
  72. href: false,
  73. }) }}
  74. </div>
  75. {% endif %}
  76. {% endif %}
  77. </div>
  78. </div>
  79. {% endset %}
  81. {% if button is defined and button|length == 1 %}
  82. <a class="banner{{ bannerModifiers }} {{ class|default }}" href="{{ storyblok.storyblokLink((button|first).href)|spaceless }}">
  83. {{ inner }}
  84. </a>
  85. {% else %}
  86. <div class="banner{{ bannerModifiers }} {{ class|default }}">
  87. {{ inner }}
  88. </div>
  89. {% endif %}