SIA Web Design Library

Event: List Item Map

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-country-map
                        '>
        <figure class='c-country-map c-event__country-map'>
            <span class='c-country-map__map'>
                <span class='c-icon c-icon--huge c-icon--map-rs'>
                    <img src='../../graphic/maps/map-rs.svg' alt='' />
                </span> </span>
            <figcaption class='c-country-map__content'>
                <span class='c-icon c-icon--flag-rs'>
                    <img src='../../graphic/flags/rs.svg' alt='' />
                </span>
            </figcaption>
        </figure>
    </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"
    }
  ],
  "countryMap": {
    "display": {
      "component": "event"
    },
    "heading": null,
    "icon": {
      "iso": "rs"
    }
  }
}