No notes defined.

<div class='c-features c-features--grid'>
                    <h1 class='c-heading c-heading--grid'>
                        Elements
                    </h1>

                    <div class='c-lead c-lead--grid'>
                        <p>Elements are grouped types of information, e.g. a program's elements. The short blurb teases the content and, as opposed to Features there is no graphic differentiation.</p>
                    </div>
                    <ul class='c-features__items l-grid--items-5'>
                        <li class='c-features__items__item'>

                            <div class='c-features__items__item__content'>
                                <h1 class='c-heading c-heading--minor'>
                                    Online modules
                                </h1>

                                <div class='c-lead c-lead--grid'>
                                    <p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
                                </div>
                            </div>
                        </li>
                        <li class='c-features__items__item'>

                            <div class='c-features__items__item__content'>
                                <h1 class='c-heading c-heading--minor'>
                                    Live webinars
                                </h1>

                                <div class='c-lead c-lead--grid'>
                                    <p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
                                </div>
                            </div>
                        </li>
                        <li class='c-features__items__item'>

                            <div class='c-features__items__item__content'>
                                <h1 class='c-heading c-heading--minor'>
                                    Peer Learning Group
                                </h1>

                                <div class='c-lead c-lead--grid'>
                                    <p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
                                </div>
                            </div>
                        </li>
                        <li class='c-features__items__item'>

                            <div class='c-features__items__item__content'>
                                <h1 class='c-heading c-heading--minor'>
                                    Expert coaching
                                </h1>

                                <div class='c-lead c-lead--grid'>
                                    <p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
                                </div>
                            </div>
                        </li>
                        <li class='c-features__items__item'>

                            <div class='c-features__items__item__content'>
                                <h1 class='c-heading c-heading--minor'>
                                    International community
                                </h1>

                                <div class='c-lead c-lead--grid'>
                                    <p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
{% if display and display.layout and display.layout != 'grid' %}
    {% set list_class = 'l-' ~ display.layout ~ ' l-' ~ display.layout ~ '--items-' ~ items|length %}
{% else %}
    {% if 'columns-2' in display.modifiers %}
        {% set list_class = 'l-grid--wide l-grid--items-' ~ items|length %}
    {% else %}
        {% set list_class = 'l-grid--items-' ~ items|length %}
    {% endif %}
{% endif %}

{% if 'secondary' in display.modifiers %}
    {% set heading_display = { modifiers: [ 'blocky' ] } %}
{% else %}
    {% set heading_display = { modifiers: [ 'minor' ] } %}
{% endif %}

<div class='{{ get_component_class( 'features', display ) }}'>
    {% if heading %}
        {% include get_template( 'heading', 'unit' ) with heading %}
    {% endif %}

    {% if lead %}
        {% include get_template( 'lead', 'unit' ) with lead %}
    {% endif %}

    <ul class='c-features__items {{ list_class }}'>
        {% for item in items %}
            <li class='c-features__items__item'>
                {% if item.icon %}
                    {% include get_template( 'icon', 'unit' ) with item.icon %}
                {% elseif item.logo %}
                    {% include get_template( 'logo', 'unit' ) with item.logo %}
                {% endif %}

                <div class='c-features__items__item__content'>
                    {% include get_template( 'heading', 'unit' ) with { 
                        display: heading_display,
                        text: item.title 
                    } %}

                    {% include get_template( 'lead', 'unit' ) with { 
                        content: item.description 
                    } %}

                    {% if item.link %}
                        <p class='c-features__items__item__content__action'>
                            {% include get_template( 'link', 'base' ) with item.link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
                        </p>
                    {% endif %}
                </div>
            </li>
        {% endfor %}
    </ul>
</div>
{
  "heading": {
    "text": "Elements"
  },
  "lead": {
    "content": "<p>Elements are grouped types of information, e.g. a program's elements. The short blurb teases the content and, as opposed to Features there is no graphic differentiation.</p>"
  },
  "items": [
    {
      "icon": null,
      "title": "Online modules",
      "description": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
    },
    {
      "icon": null,
      "title": "Live webinars",
      "description": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
    },
    {
      "icon": null,
      "title": "Peer Learning Group",
      "description": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
    },
    {
      "icon": null,
      "title": "Expert coaching",
      "description": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
    },
    {
      "icon": null,
      "title": "International community",
      "description": "<p>Features are a group of VPs, USPs, or grouped types of information. The short blurb teases the content of the link's target in order to incite the visitors to click through.</p>"
    }
  ],
  "display": {
    "layout": "grid"
  }
}