SIA Web Design Library

Resources: Grid

No notes defined.

<div class='c-resources'>
    <h1 class='c-heading c-heading--minor'>
        Resources
    </h1>

    <div class='c-lead'>
        <p>Find your fitting resource.</p>
    </div>
    <div class='c-resources c-resources--teaser c-resources--entities c-resources--resources c-resources__resources'>
        <ul class='c-resources__items l-grid u-list--unstyled'>
            <li class='c-resources__items__item l-grid__item'>

                <article class='c-resource resource type-resource c-resources__resource c-resources__resource--teaser c-resource--teaser'>

                    <div class='c-resource__content-wrapper'>

                        <h1 class='c-heading c-heading--minor'>
                            <a class='c-link c-link--minor  o-modal-trigger ' href="#" itemprop="item" itemid="#"><span itemprop="name">Content Manager</span></a>
                        </h1>

                        <p>You should lay this out here. Think of every possible resource you need (for our example, it can be guidelines on how to do interviews, help of someone else to reach your customers, an online survey tool, etc.).</p>

                    </div>

                </article>
            </li>
            <li class='c-resources__items__item l-grid__item'>

                <article class='c-resource resource type-resource c-resources__resource c-resources__resource--teaser c-resource--teaser'>

                    <div class='c-resource__content-wrapper'>

                        <h1 class='c-heading c-heading--minor'>
                            <a class='c-link c-link--minor ' href="#" itemprop="item" itemid="#"><span itemprop="name">Content Manager</span></a>
                        </h1>

                        <p>You should lay this out here. Think of every possible resource you need (for our example, it can be guidelines on how to do interviews, help of someone else to reach your customers, an online survey tool, etc.).</p>

                    </div>

                </article>
            </li>
        </ul>

    </div>
</div>
 
<div class='{{ get_component_class( 'resources', display ) }}'>
    {% if heading %}
        {% include get_template( 'heading', 'unit' ) with heading|merge( { display: { modifiers: [ 'minor' ] } } ) %}
    {% endif %}
    
    {% if lead %}
        {% include get_template( 'lead', 'unit' ) with lead %}
    {% endif %}
    
    {% if entities %}
        {% include '@group/entities/entities.twig' with entities %}
    {% endif %}
</div>
 
{
  "heading": {
    "text": "Resources",
    "display": {
      "modifiers": [
        "minor"
      ]
    }
  },
  "lead": {
    "content": "<p>Find your fitting resource.</p>"
  },
  "entities": {
    "display": {
      "component": "resources"
    },
    "collection": {
      "entityType": "resource",
      "display": {
        "component": "resources",
        "view_mode": "teaser",
        "listClass": [
          "l-grid"
        ],
        "itemClass": [
          "l-grid__item"
        ]
      },
      "items": [
        {
          "entityType": "resource",
          "permalink": "https://socialimpactaward.net/volunteering-gave-me-more-than-just-the-skills/",
          "heading": {
            "text": "Content Manager",
            "url": "#"
          },
          "content": "<p>You should lay this out here. Think of every possible resource you need (for our example, it can be guidelines on how to do interviews, help of someone else to reach your customers, an online survey tool, etc.).</p>",
          "showInModal": true
        },
        {
          "entityType": "resource",
          "permalink": "https://socialimpactaward.net/volunteering-gave-me-more-than-just-the-skills/",
          "heading": {
            "text": "Content Manager",
            "url": "#"
          },
          "content": "<p>You should lay this out here. Think of every possible resource you need (for our example, it can be guidelines on how to do interviews, help of someone else to reach your customers, an online survey tool, etc.).</p>"
        }
      ]
    }
  }
}