components/billboard/billboard.html

{# @billboard
#
# parameters:
# class         - string
# image         - path
# title         - string
# title_el      - HTML heading element (h1, h2, h3, h4, h5, h6)
# desc          - string
# cta           - string
# cta_link      - url
#}
<div class="mzp-c-billboard {% if class %} {{ class }}{% else %}mzp-l-billboard-right{% endif %}">
  <div class="mzp-c-billboard-image-container">
    <img class="mzp-c-billboard-image" src="{{ image | default('/img/billboard-image.png') | path }}" alt="">
  </div>
  <div class="mzp-c-billboard-content">
    <div class="mzp-c-billboard-content-container">
      <div class="mzp-c-billboard-content-inner">
        <{{ title_el | default('h2') }} class="mzp-c-billboard-title">{{ title }}</{{ title_el | default('h2') }}>
      {%- if desc %}
        <p class="mzp-c-billboard-desc">{{ desc }}</p>
      {% endif -%}
      {%- if cta %}
        <a href="{{ cta_link }}" class="mzp-c-cta-link">{{ cta }}</a>
      {% endif -%}
      </div>
    </div>
  </div>
</div>