SIA Web Design Library

List item: Comfy

Include the component in lists (e.g. events or search results) for a wide display with default “Comfy” spacing. When in an embedded list (e.g. suggested articles in a Post), use the “Compact” variant.

Required

  • Heading.

Ideal

  • Media (image or country map),
  • Short form Content (e.g. teaser) in Comfy variant
  • Meta,

Optional

  • Fields and Details (hidden in a details element)
  • Links
<figure class='
            c-post__media-wrapper
                            c-post__media-wrapper--with-image
                                        '>
    <span class='c-media c-list-item__media'>
        <img class='c-media__image' src='/images/cover-journey-16x9.jpg' alt='Cover journey' />
    </span>
</figure>

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

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

    <div class='c-meta c-list-item__meta'>

        <div class='c-tags c-meta__tags c-tags--tag-icon'>
            <p class='c-tags__items'>
                [object Object], [object Object] </p>
        </div>

        <time class='c-date c-date--date c-date--with-icon c-meta__date  dt-start ' datetime='2020-07-015T16:00:00+0200' />
        15.07.2020
        </time>

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

<footer class='c-post__footer'>
    <div class='c-task-list c-post__task-list'>
        <ol class='c-task-list__items'>
            <li class='c-task-list__items__item c-task-list__items__item--urgent'>
                <span class='u-h4'>Missing assessment</span>
                <span class='c-task-list__description'>Your initial assessment of the venture is missing.</span>
                <span class='c-task-list__items__item__links'>
                    <a class='c-link c-post__link ' href="" itemprop="item" itemid=""><span itemprop="name">Add assessment</span></a> </span>
            </li>
        </ol>
    </div>
    <div class='c-action-bar c-list-item__action-bar'>
        <div class='c-action-bar__actions'>
            <a class='c-button c-button--small' href="#">Take action</a>
        </div>
        <div class='c-action-bar__links '>
            <a class='c-link c-link--undefined c-link--with-icon c-link--minimal ' href="https://socialimpactaward.net/volunteering-gave-me-more-than-just-the-skills/" itemprop="item" itemid="https://socialimpactaward.net/volunteering-gave-me-more-than-just-the-skills/"><span itemprop="name">View</span></a>
        </div>
    </div>
</footer>
 
{% if workflowInfo %}
    {% include get_template( 'workflow-info', 'unit' ) with workflowInfo %}
{% endif %}

{% if image or countryMap or logo %}
    <figure class='
            c-{{ entityType }}__media-wrapper
            {% if image %}
                c-{{ entityType }}__media-wrapper--with-image
                {% if image.backgroundOnly %}
                    c-{{ entityType }}__media-wrapper--with-image--background-only
                {% endif %}
            {% elseif logo %}
                c-{{ entityType }}__media-wrapper--with-logo
            {% elseif countryMap %}
                c-{{ entityType }}__media-wrapper--with-country-map
            {% endif %}
            '
            {% if image and image.backgroundOnly %}
                {% if image.lazy %}data-{% endif %}style='background-image: url( {{ image.src }} )' 
            {% endif %}>
        {% if image and not image.backgroundOnly %}
            {% include get_template( 'media', 'unit' ) with image %}
        {% elseif logo %}
            {% include get_template( 'logo', 'unit' ) with logo %}
        {% elseif countryMap %}
            {% include get_template( 'country-map', 'unit' ) with countryMap %}
        {% endif %}
    </figure>
{% endif %}

<div class='c-{{ entityType }}__content-wrapper'>
    {% if highlight and highlight.config %}
        <div class='c-{{ entityType }}__highlight'>
            {% include get_template( highlight.component, highlight.type ) with highlight.config %}
        </div>
    {% endif %}

    {% include get_template( 'heading', 'unit' ) with heading|merge( { display: { modifiers: [ 'minor'] } } ) %}

    {% if meta %}
        {% include get_template( 'meta', 'unit') with meta|merge( { display: { component: 'list-item' }, showInModal: FALSE } ) %}
    {% endif %}

    {% if content %}
        {{ content|raw }}
    {% endif %}

    {% if socialLinks %}
        {% include get_template( 'social-links', 'unit' ) with socialLinks %}
    {% endif %}

    {% if details or fields %}
        <details>
            <summary><strong>{{ 'Details'|t }}</strong></summary>
            {% if details %}
                {% for detail in details %}
                    {% include get_template( detail.component, detail.type ) with detail.config %}       
                {% endfor %}
            {% endif %}

            {% if fields %}
                {% for field in fields %}
                    {% include get_template( 'generic-field', 'unit' ) with field %}       
                {% endfor %}
            {% endif %}
        </details>
    {% endif %}
</div>

{% if links or button or issues %}
    <footer class='c-{{ entityType }}__footer'>
        {% if issues %}
            {% include get_template( 'task-list', 'unit' ) with issues|merge( { display: { component: entityType } } ) %}
        {% endif %}

        {% if links or button %}
            {% include get_template( 'action-bar', 'unit' ) with {
                display: {
                    component: 'list-item'
                },
                links: links,
                button: button
            } %}
        {% endif %}
    </footer>
{% endif %}
 
{
  "entityType": "post",
  "heading": {
    "text": "Milestone Planning Tool",
    "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>",
  "meta": {
    "created": {
      "formatted": "15.07.2020",
      "isotime": "2020-07-015T16:00:00+0200",
      "time": "19:00",
      "timezone": "CEST"
    }
  },
  "tags": {
    "items": [
      {
        "text": "SIA News",
        "url": "#"
      },
      {
        "text": "Social entrepreneurship",
        "url": "#"
      }
    ]
  },
  "image": {
    "display": {
      "component": "list-item"
    },
    "src": "/images/cover-journey-16x9.jpg",
    "alt": "Cover journey"
  },
  "links": [
    {
      "text": "View",
      "href": "https://socialimpactaward.net/volunteering-gave-me-more-than-just-the-skills/"
    }
  ],
  "button": {
    "text": "Take action",
    "url": "#"
  },
  "issues": {
    "heading": null,
    "items": [
      {
        "title": "Missing assessment",
        "description": "Your initial assessment of the venture is missing.",
        "status": "urgent",
        "links": [
          {
            "text": "Add assessment",
            "url": "#"
          }
        ]
      }
    ]
  }
}