SIA Web Design Library

Page Lead: Compact, no hero

No notes defined.

<div class='r-page-lead r-page-lead--compact
     r-page-lead--text     '>
    <span class='o-themed-rainbow-deco o-themed-rainbow-deco--compact o-themed-rainbow-deco--5-lines' aria-hidden='true'>
        <span></span><span></span><span></span><span></span><span></span></span>

    <header class='c-section-header c-section-header--compact'>

        <div class='c-breadcrumbs c-section-header__breadcrumbs'>
            <ol class='c-breadcrumbs__items u-list--unstyled u-list--inline' itemscope itemtype="https://schema.org/BreadcrumbList">
                <li class='c-breadcrumbs__items__item' itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

                    <a class='c-link c-link--minimal c-link--with-icon c-link--icon--reversed c-link--forward c-breadcrumbs__link ' href="#" itemprop="item" itemid="#"><span itemprop="name">Parent section</span></a>
                    <meta itemprop="position" content="1" />
                </li>
                <li class='c-breadcrumbs__items__item' itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

                    <a class='c-link c-link--minimal c-link--with-icon c-link--icon--reversed c-link--forward c-breadcrumbs__link ' href="#" itemprop="item" itemid="#"><span itemprop="name">Current section</span></a>
                    <meta itemprop="position" content="2" />
                </li>
                <li class='c-breadcrumbs__items__item' itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">

                    <a class='c-link c-link--minimal c-breadcrumbs__link ' href="#" itemprop="item" itemid="#" title="Permalink"><span itemprop="name">Current page</span></a>
                    <meta itemprop="position" content="3" />
                </li>
            </ol>
        </div>
        <p class='c-section-header__supra'><span>Why we exist</span></p>

        <h1 class='c-heading c-heading--compact'>
            History
        </h1>

    </header>

    <div class='c-lead c-lead--compact'>
        <p>Together with the Vienna University of Economics and Business and HIL Foundation we started to research and implement our findings on wellbeing since 2018. Peter Vandor, research partner and founder of Social Impact Award, shares the latest findings.</p>
    </div>
</div>
 
<div class='{{ get_component_class( 'page-lead', display, 'r' ) }}
    {% if not hero %} r-page-lead--text {% endif %}
    '>
    {% if hero %}
        {% include '@unit/hero/hero.twig' with hero %}
    {% elseif not ( 'blend-in' in display.modifiers ) %}
        {% include '@brand/flourishes/flourishes--themed-rainbow.twig' %}
    {% endif %}

    {% if not hero and ( not 'compact' in display.modifiers ) and ( not 'blend-in' in display.modifiers ) %}
        {% set sectionHeaderConfig = sectionHeader|merge( { display: { modifiers: [ 'huge' ] } }) %}
    {% else %}
        {% set sectionHeaderConfig = sectionHeader %}
    {% endif %}
    
    {% include '@unit/section-header/section-header.twig' with sectionHeaderConfig %}

    {% if meta %}
        {% include '@unit/meta/meta.twig' with meta %}
    {% endif %}

    {% if lead %}
        {% include '@unit/lead/lead.twig' with lead %}
    {% endif %}
</div>
 
{
  "hero": null,
  "sectionHeader": {
    "breadcrumbs": {
      "items": [
        {
          "text": "Parent section",
          "href": "#"
        },
        {
          "text": "Current section",
          "href": "#"
        },
        {
          "text": "Current page",
          "title": "Permalink",
          "href": "#"
        }
      ]
    },
    "heading": {
      "text": "History"
    },
    "supraheading": "Why we exist"
  },
  "lead": {
    "content": "<p>Together with the Vienna University of Economics and Business and HIL Foundation we started to research and implement our findings on wellbeing since 2018. Peter Vandor, research partner and founder of Social Impact Award, shares the latest findings.</p>"
  },
  "meta": null,
  "theme": "community",
  "display": {
    "modifiers": [
      "compact"
    ]
  }
}