SIA Web Design Library

Event: List Item

No notes defined.

<article class='c-event event type-event c-event--list-item'>

    <figure class='
            c-event__media-wrapper
                            c-event__media-wrapper--with-image
                                        '>
        <span class='c-media c-event--teaser__media'>
            <img class='c-media__image' src='/images/summit-crowd-1x1.jpg' alt='Cover journey' />
        </span>
    </figure>

    <div class='c-event__content-wrapper'>
        <div class='c-event__highlight'>

            <time class='c-date c-date--graphic c-event__date  dt-start ' datetime='' />
            <span class='c-date__day'>15</span><span class='c-date__month'>07</span><span class='c-date__year'>2020</span><span class='c-date__time-timezone'><span class='c-date__time'>19:00</span> <span class='c-date__timezone'>CEST</span></span> </time>

        </div>

        <h1 class='c-heading c-heading--minor'>
            Milestone Planning Webinarr
        </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] </p>
            </div>

        </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-event__footer'>

        <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--edit c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Edit</span></a> <a class='c-link c-link--delete c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Delete</span></a>
            </div>
        </div>
    </footer>
</article>
 
<article class='{{ get_entity_class( entityType, display ) }}'>
    {% include get_template( 'list-item', 'unit' ) with { 
        highlight: {
            component: 'date',
            type: 'unit',
            config: start_date
        }
    } %}
</article>
 
{
  "theme": "education",
  "entityType": "event",
  "display": {
    "view_mode": "list-item"
  },
  "eventType": "online",
  "focusArea": [
    {
      "text": "<a href='#'>Operations</a>"
    },
    {
      "text": "<a href='#'>Business modeling</a>"
    }
  ],
  "eventLanguage": [
    "English"
  ],
  "heading": {
    "text": "Milestone Planning Webinarr"
  },
  "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>",
  "gettingStarted": {
    "display": {
      "component": "event",
      "modifiers": [
        "background-notice"
      ]
    },
    "heading": {
      "text": "Before we start"
    },
    "content": "Background Paper: https://drive.google.com/open?id=197NbVpNo78M5NBSoHfrHCIOtl6VHrkhH&authuser=jonas.dinger%40socialimpactaward.net&usp=drive_fs"
  },
  "start_date": {
    "display": {
      "component": "event",
      "modifiers": [
        "graphic"
      ]
    },
    "formatted": null,
    "weekday": "Monday",
    "day": 15,
    "month": "07",
    "year": 2020,
    "time": "19:00",
    "timezone": "CEST"
  },
  "meta": {
    "tags": {
      "items": [
        {
          "text": "Operations",
          "url": "#"
        }
      ]
    }
  },
  "button": {
    "text": "Take action",
    "url": "#"
  },
  "links": [
    {
      "href": "#",
      "icon": "edit",
      "text": "Edit"
    },
    {
      "href": "#",
      "icon": "delete",
      "text": "Delete"
    }
  ],
  "image": {
    "display": {
      "component": "event--teaser"
    },
    "src": "/images/summit-crowd-1x1.jpg",
    "alt": "Cover journey"
  }
}