SIA Web Design Library

Boarding Pass: Finished

No notes defined.

<div class='c-boarding-pass c-boarding-pass--finished'>
    <header class='c-boarding-pass__header'>
        <p class='c-boarding-pass__stage'><span class='c-tag c-tag--finished'>Scheduled</span></p>
        <h1 class='c-heading c-heading--minor c-boarding-pass__heading'>
            <a class='c-link c-link--minor c-boarding-pass__link ' href="#" itemprop="item" itemid="#"><span itemprop="name">Blue Monday Project & Georg Woschnagg</span></a>
        </h1>
    </header>

    <p class='c-boarding-pass__stage-message'>Scheduled for 15.07.2020, 15:00 CEST</p>

    <div class='c-boarding-pass__schedule'>
        <span class='c-boarding-pass__schedule__item'>
            <span class='c-boarding-pass__schedule__item__label'>Date</span>
            <span class='c-boarding-pass__schedule__item__value'>21.07.2020</span>
        </span>
        <span class='c-boarding-pass__schedule__item'>
            <span class='c-boarding-pass__schedule__item__label'>Time</span>
            <span class='c-boarding-pass__schedule__item__value'>19:00 CEST</span>
        </span>
        <span class='c-boarding-pass__schedule__item'>
            <span class='c-boarding-pass__schedule__item__label'>Duration</span>
            <span class='c-boarding-pass__schedule__item__value'>60 minutes</span>
        </span>
    </div>

</div>
 
<div class='{{ get_component_class( 'boarding-pass', display ) }}'>
    <header class='c-boarding-pass__header'>
        {% if date %}
            <div class='c-boarding-pass__date-wrapper'>
                {% include get_template( 'date', 'unit' ) with date|merge( { display: { modifiers: [ 'graphic' ] } } ) %}
            </div>
        {% endif %}
        <p class='c-boarding-pass__stage'>{% include get_template( 'tag', 'unit' ) with { text: stage_literal } %}</p>
        {% include get_template( 'heading', 'unit' ) with heading %}
    </header>

    {% if stage_message is not empty %}
        <p class='c-boarding-pass__stage-message'>{{ stage_message }}</p>
    {% endif %}

    {% if schedule %}
        <div class='c-boarding-pass__schedule'>
            {% for item in schedule %}
                <span class='c-boarding-pass__schedule__item'>
                    <span class='c-boarding-pass__schedule__item__label'>{{ item.label }}</span>
                    <span class='c-boarding-pass__schedule__item__value'>{{ item.value }}</span>
                </span>
            {% endfor %}
        </div>
    {% endif %}

    {% if button or links %}
        <div class='c-boarding-pass__actions'>
            {% if actions_description %}
                <p class='c-boarding-pass__actions-description'>{{ actions_description|raw }}</p>
            {% endif %}
            {% if links or button %}
                {% include get_template( 'action-bar', 'unit' ) with {
                    links: links,
                    button: button
                } %}
            {% endif %}
        </div>
    {% endif %}
</div>
 
{
  "component": "boarding-pass",
  "display": {
    "modifiers": [
      "finished"
    ]
  },
  "heading": {
    "display": {
      "component": "boarding-pass",
      "modifiers": [
        "minor"
      ]
    },
    "text": "Blue Monday Project & Georg Woschnagg",
    "url": "#"
  },
  "stage_literal": "Scheduled",
  "stage_message": "Scheduled for 15.07.2020, 15:00 CEST",
  "schedule": [
    {
      "label": "Date",
      "value": "21.07.2020"
    },
    {
      "label": "Time",
      "value": "19:00 CEST"
    },
    {
      "label": "Duration",
      "value": "60 minutes"
    }
  ]
}