Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Key value list

Key value

#
Key
Value
Key
Value
Key
Value
Key
Value 
<dl class="c-key-value">
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
</dl>
dl.c-key-value
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value

Key value horizontal

#
Key
Value
Key
Value
Key
Value
Key
Value 
<dl class="c-key-value c-key-value--horizontal">
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
    <div class="c-key-value-item">
        <dt class="c-key-value-item__key">Key</dt>
        <dd class="c-key-value-item__value">Value
        </dd>
    </div>
</dl>
dl.c-key-value.c-key-value--horizontal
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value
    +c-key-value({key: 'Key'}) Value

Possible parameters for key value

Parameters Type Possible values Description
key string Text This parameter is used for text inside the key.
placeholder string Text This parameter is used for the placeholder text in case no value is given.