SIA Web Design Library

Activity Item: Default

No notes defined.

<div class="c-activity-item">
    <div class='c-activity-item__photo'>
        <span class='u-photo c-headshot c-activity-item__headshot'>
            <img class='c-headshot__image' src='/images/portrait.jpg' alt='' title='' />
        </span>
    </div>

    <div class='c-activity-item__content'>
        <p class='c-meta c-activity-item__meta'>
            21.06.2020, 09:32
            |
            <span class='c-tag c-tag--notice'>notice</span> |
            Finalist User
        </p>

        <div class='c-activity-item__text'>
            Finalist User used one-time login link at time 1591959547.
        </div>

    </div>
</div>
 
<div class="{{ get_component_class( 'activity-item', display ) }}">
    <div class='c-activity-item__photo'>
        {% if headshot %}
            {% include '@unit/headshot/headshot.twig' with headshot %}
        {% else %}
            {% include '@unit/avatar/avatar.twig' %}
        {% endif %}
    </div>

    <div class='c-activity-item__content'>
        <p class='c-meta c-activity-item__meta'>
            {{ timestamp }}
            | 
            {% include '@unit/tag/tag.twig' with type %}
            |
            {{ user_name }}
        </p>
        
        <div class='c-activity-item__text'>
            {{ message|raw }}
        </div>

        {% if links %}
            <div class='c-activity-item__links'>
                {% for link in links %}
                    {{ link|raw }}
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>
 
{
  "timestamp": "21.06.2020, 09:32",
  "type": {
    "display": {
      "modifiers": [
        "notice"
      ]
    },
    "text": "notice"
  },
  "message": "Finalist User used one-time login link at time 1591959547.",
  "user_name": "Finalist User",
  "headshot": {
    "display": {
      "component": "activity-item"
    },
    "src": "/images/portrait.jpg"
  }
}