DSO Toolkit homepage

Application Heading

Component preview opent in nieuw tabblad

There are no notes for this item.

<!-- Default -->
<div class="dso-app-heading">

    <h1>H1 Paginatitel</h1>

</div>
<!-- With Subtitle -->
<div class="dso-app-heading">

    <h1>H1 Paginatitel</h1>

    <h2>
        H2 Subtitel

    </h2>

</div>
<!-- With Subtitle And Steps -->
<div class="dso-app-heading">

    <h1>H1 Paginatitel</h1>

    <h2 class="dso-steps-indicator">
        H2 Subtitel

        <span class="dso-step">
            Stap x van x
        </span>

    </h2>

</div>
<!-- Just Subtitle -->
<div class="dso-app-heading">

    <h2>
        H2 Subtitel

    </h2>

</div>
<!-- Just Subtitle And Steps -->
<div class="dso-app-heading">

    <h2 class="dso-steps-indicator">
        H2 Subtitel

        <span class="dso-step">
            Stap x van x
        </span>

    </h2>

</div>
<div class="dso-app-heading">
  {% if title %}
    <h1>{{ title }}</h1>
  {% endif %}
  {% if subtitle %}
    <h2 {{ className([step, 'dso-steps-indicator']) }}>
      {{ subtitle }}
      {% if step %}
        <span class="dso-step">
          {{ step }}
        </span>
      {% endif %}
    </h2>
  {% endif %}
</div>
/* Default */
__title: default
title: H1 Paginatitel
/* With Subtitle */
__title: Met subtitel
title: H1 Paginatitel
subtitle: H2 Subtitel
/* With Subtitle And Steps */
__title: Met subtitel en stappen
title: H1 Paginatitel
subtitle: H2 Subtitel
step: Stap x van x
/* Just Subtitle */
__title: Alleen subtitel
title: null
subtitle: H2 Subtitel
/* Just Subtitle And Steps */
__title: Alleen subtitel en stappen
title: null
subtitle: H2 Subtitel
step: Stap x van x