SIA Web Design Library

Event: Condensed

No notes defined.

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

    <figure class='
            c-event__media-wrapper
                            c-event__media-wrapper--with-image
                                        '>
        <span class='c-media c-event--list-item__media'>
            <img class='c-media__image' src='/images/summit-speaker-balloons-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>The second field is Milestones. As discussed before, milestones should give you an indication if you have achieved your project goal and/or if you are on track of achieving it in time. Don‘t forget the SMART criteria here in the formulation of the milestones (this includes specifiying „who“ is responsible for achieving it). As you can see several milestone form a project.</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",
    "modifiers": [
      "condensed"
    ]
  },
  "eventType": "online",
  "focusArea": [
    {
      "text": "<a href='#'>Operations</a>"
    },
    {
      "text": "<a href='#'>Business modeling</a>"
    }
  ],
  "eventLanguage": [
    "English"
  ],
  "heading": {
    "text": "Milestone Planning Webinarr"
  },
  "content": "<p>The second field is Milestones. As discussed before, milestones should give you an indication if you have achieved your project goal and/or if you are on track of achieving it in time. Don‘t forget the SMART criteria here in the formulation of the milestones (this includes specifiying „who“ is responsible for achieving it). As you can see several milestone form a project.</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--list-item"
    },
    "src": "/images/summit-speaker-balloons-1x1.jpg",
    "alt": "Cover journey"
  }
}