Application Heading

Component preview opent in nieuw tabblad

There are no notes for this item.

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

    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>

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

    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>

    <h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    </h2>

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

    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</h1>

    <h2 class="dso-steps-indicator">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

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

    </h2>

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

    <h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    </h2>

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

    <h2 class="dso-steps-indicator">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

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

    </h2>

</div>
{% render '@application-heading', {title: title, subtitle: subtitle, step: step} %}
/* Default */
__title: default
title: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
/* With Subtitle */
__title: Met subtitel
title: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
subtitle: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
/* With Subtitle And Steps */
__title: Met subtitel en stappen
title: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
subtitle: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
step: Stap x van x
/* Just Subtitle */
__title: Alleen subtitel
title: null
subtitle: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
/* Just Subtitle And Steps */
__title: Alleen subtitel en stappen
title: null
subtitle: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor.
step: Stap x van x