SIA Web Design Library

Focus areas

No notes defined.

<div class='c-focus-areas c-focus-areas--focus-areas-icon'>
    <p class='c-focus-areas__items'>
        <a class='c-link c-link--muted c-focus-areas__link ' href="#a" itemprop="item" itemid="#a"><span itemprop="name">Business model</span></a>, <a class='c-link c-link--muted c-focus-areas__link ' href="#a" itemprop="item" itemid="#a"><span itemprop="name">Problem-solution fit</span></a>, <a class='c-link c-link--muted c-focus-areas__link ' href="#b" itemprop="item" itemid="#b"><span itemprop="name">Operations</span></a>
    </p>
</div>
 
<div class='{{ get_component_class( 'focus-areas', display ) }} c-focus-areas--focus-areas-icon'>
    <p class='c-focus-areas__items'>
        {% for item in items %}
            {% if item.href %}
                {% include get_template( 'link', 'base' ) with item|merge( { display: { component: 'focus-areas', modifiers: [ 'muted' ] } } ) %}{% if not loop.last %},{% endif %}
            {% else %}
                {{ item.text }}{% if not loop.last %},{% endif %}
            {% endif %}
        {% endfor %}
    </p>
</div>
 
{
  "items": [
    {
      "text": "Business model",
      "href": "#a"
    },
    {
      "text": "Problem-solution fit",
      "href": "#a"
    },
    {
      "text": "Operations",
      "href": "#b"
    }
  ]
}