PSI Software SE Design Library

Event Summary

No notes defined.

<div class="eventSummary">

    <h3 class="eventSummary-title">Ich bin der Titel</h3>

    <div class="metadataList">
        <dl class="metadataList-list">
            <div class="metadataList-item">
                <dt class="metadataList-label">Hashtag</dt>
                <dd class="metadataList-value">Echo</dd>
            </div>
            <div class="metadataList-item">
                <dt class="metadataList-label">Park</dt>
                <dd class="metadataList-value">Biodiesel</dd>
            </div>
            <div class="metadataList-item">
                <dt class="metadataList-label">Plaid</dt>
                <dd class="metadataList-value">Skateboard</dd>
            </div>
        </dl>
    </div>

</div>
 
<div class="eventSummary{{#modifier}} {{.}}{{/modifier}}">

    {{#title}}<h3 class="eventSummary-title">{{{.}}}</h3>{{/title}}

    {{#metadatalist}}
        {{render '@metadatalist' (contextData '@eventsummary' this) merge=true}}
    {{/metadatalist}}

</div>
 
{
  "title": "Ich bin der Titel",
  "metadatalist": {
    "items": [
      {
        "label": "Hashtag",
        "value": "Echo"
      },
      {
        "label": "Park",
        "value": "Biodiesel"
      },
      {
        "label": "Plaid",
        "value": "Skateboard"
      }
    ]
  }
}
  • Content: 
    %eventSummary {
    @extend %card--large;
    @include stack-spacing(section);

    > *:first-child {
        @include stack-spacing(0);
    }

    &-title {
        @extend %heading;
    }

}

.eventSummary {
    @extend %eventSummary;

    &-title {
        @extend %eventSummary-title;
    }

}
  • URL: /components/raw/eventsummary/_eventSummary.styles.scss
  • Filesystem Path: components/04-modules/eventSummary/_eventSummary.styles.scss
  • Size: 298 Bytes