PSI Software SE Design Library

Metadata List

No notes defined.

<!-- Default -->
<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>


<!-- Many Items -->
<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>
        <div class="metadataList-item">
            <dt class="metadataList-label">Flexitarian</dt>
            <dd class="metadataList-value">Retro</dd>
        </div>
        <div class="metadataList-item">
            <dt class="metadataList-label">Selfies</dt>
            <dd class="metadataList-value">8-bit</dd>
        </div>
        <div class="metadataList-item">
            <dt class="metadataList-label">Cardigan</dt>
            <dd class="metadataList-value">Single-origin</dd>
        </div>
        <div class="metadataList-item">
            <dt class="metadataList-label">Vinyl</dt>
            <dd class="metadataList-value">Echo Park</dd>
        </div>
    </dl>
</div>


<div class="metadataList{{#modifier}} {{.}}{{/modifier}}">
        {{#if items}}
    <dl class="metadataList-list">
            {{#items}}
        <div class="metadataList-item">
            <dt class="metadataList-label">{{{label}}}</dt>
            <dd class="metadataList-value">{{{value}}}</dd>
        </div>
            {{/items}}
    </dl>
        {{/if}}
</div>
 
/* Default */
{
  "items": [
    {
      "label": "Hashtag",
      "value": "Echo"
    },
    {
      "label": "Park",
      "value": "Biodiesel"
    },
    {
      "label": "Plaid",
      "value": "Skateboard"
    }
  ]
}


/* Many Items */
{
  "items": [
    {
      "label": "Hashtag",
      "value": "Echo"
    },
    {
      "label": "Park",
      "value": "Biodiesel"
    },
    {
      "label": "Plaid",
      "value": "Skateboard"
    },
    {
      "label": "Flexitarian",
      "value": "Retro"
    },
    {
      "label": "Selfies",
      "value": "8-bit"
    },
    {
      "label": "Cardigan",
      "value": "Single-origin"
    },
    {
      "label": "Vinyl",
      "value": "Echo Park"
    }
  ]
}
  • Content: 
    %metadataList {
    $gap: var(--bp);

    @include stack-spacing();
    @include text-size(small);

    &-list {
        @include stack-spacing(0);

        display: flex;
        flex-wrap: wrap;
        column-gap: calc(2 * #{$gap});
        row-gap: var(--sp);

        overflow: hidden;
    }

    &-item {

        &:not(:first-child) {
            position: relative;

            &::before {
                content: "";

                display: block;
                height: 100%;
                width: var(--bw);

                position: absolute;
                top: 50%;
                left: calc(-1 * #{$gap});

                transform: translateY(-50%);

                background: $_border-color--translucent;
            }

        }

    }

    &-label {
    }

    &-value {
        margin-left: 0;
        font-weight: $_font-weight--bold;
    }

    > dl {
        @extend %metadataList-list;
    }

    &-list > dt {
        @extend %metadataList-label;
    }

    &-list > dd {
        @extend %metadataList-value;
    }

}

.metadataList {
    @extend %metadataList;

    &-list {
       @extend %metadataList-list;
    }

    &-item {
       @extend %metadataList-item;

    }

    &-label {
       @extend %metadataList-label;
    }

    &-value {
       @extend %metadataList-value;
    }

}
  • URL: /components/raw/metadatalist/_metadataList.styles.scss
  • Filesystem Path: components/03-fragments/metadataList/_metadataList.styles.scss
  • Size: 1.3 KB