SIA Web Design Library

Page Lead: Left aligned (themed)

No notes defined.

<div class='r-page-lead r-page-lead--left-aligned
        '>
    <div class='c-hero c-hero--left-aligned' style="background-image: url( '/images/cover-blog-post-16x9.jpg' );">
        <img class='c-hero__image' src='/images/cover-blog-post-16x9.jpg' alt='' />
    </div>

    <header class='c-section-header c-section-header--left-aligned'>

        <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>

        <h1 class='c-heading c-heading--left-aligned'>
            Volunteering gave me more than just the skills!
        </h1>

    </header>
    <div class='c-meta c-page-lead__meta'>

        <span class='c-meta__freeform'>
            <a href='#'>Operations</a> | <a href='#'>Business modeling</a>
        </span>
    </div>
    <div class='c-lead c-lead--left-aligned'>
        <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": {
    "image": {
      "display": {
        "component": "hero"
      },
      "src": "/images/cover-blog-post-16x9.jpg"
    }
  },
  "sectionHeader": {
    "breadcrumbs": {
      "items": [
        {
          "text": "Parent section",
          "href": "#"
        },
        {
          "text": "Current section",
          "href": "#"
        },
        {
          "text": "Current page",
          "title": "Permalink",
          "href": "#"
        }
      ]
    },
    "heading": {
      "text": "Volunteering gave me more than just the skills!"
    }
  },
  "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": {
    "display": {
      "component": "page-lead"
    },
    "items": [
      "<a href='#'>Operations</a>",
      "<a href='#'>Business modeling</a>"
    ]
  },
  "display": {
    "modifiers": [
      "left-aligned"
    ]
  },
  "theme": "education"
}