Du kan använda namnvärdelistan när du ska presentera innehåll där varje etikett enbart har ett värde.
Använd en namnvärdelista när varje etikett enbart har ett värde.
Datatabell: När varje etikett kan innehålla många värden,
När du använder komponenten kan du behöva ändra den utifrån det innehåll listan ska ha. Komponenten innehåller förvalda värden som passar i många fall, men du kan behöva justera koden för att komponenten ska passa ditt projekt.
Du kan styra komponentens egenskaper enligt följande:
Behöver du hjälp med att justera komponenten så kontakta styleguideteamet via element. Vi hjälper dig gärna!
Komponenten driftsattes första gången i version 21.1.10 Länk till annan webbplats..
Variabel | Beskrivning | Förvaltvärde |
---|---|---|
--c-nvlist-max-label-width | Sätter max-bredden på etiketten innan radbrytning. | 12ch |
--c-nvlist-min-inline-size | Sätter min-bredden för container där listan byter från horisontell till vertikal layout. | 70% |
--c-nvlist-gap | Sätter mellanrum mellan kolumner | 0 1 em |
--c-nvlist-padding | Sätter padding på både etikett och värdet | 0.375rem |
--c-nvlist-horizontal-column-width | Sätter horisontell kolumn bredd | 20ch |
<dl class="c-namevalue-list" style="--c-nvlist-padding: 0.375em">
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item one</dt>
<dd class="c-namevalue-list__body__value">My first value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item two</dt>
<dd class="c-namevalue-list__body__value">A second value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item three</dt>
<dd class="c-namevalue-list__body__value">A third item with a smile</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item four is so much more better</dt>
<dd class="c-namevalue-list__body__value">More content in the fourth position to demonstrate wrapping</dd>
</div>
</dl>
<dl class="c-namevalue-list c-namevalue-list--small">
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item one</dt>
<dd class="c-namevalue-list__body__value">My first value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item two</dt>
<dd class="c-namevalue-list__body__value">A second value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item three</dt>
<dd class="c-namevalue-list__body__value">A third item with a smile</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item four is so much more better</dt>
<dd class="c-namevalue-list__body__value">More content in the fourth position to demonstrate wrapping</dd>
</div>
</dl>
<dl class="c-namevalue-list c-namevalue-list--horizontal">
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item one</dt>
<dd class="c-namevalue-list__body__value">My first value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item two</dt>
<dd class="c-namevalue-list__body__value">A second value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item three</dt>
<dd class="c-namevalue-list__body__value">A third item with a smile</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item four is so much more better</dt>
<dd class="c-namevalue-list__body__value">More content in the fourth position to demonstrate wrapping</dd>
</div>
</dl>
<dl class="c-namevalue-list c-namevalue-list--small c-namevalue-list--horizontal">
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item one</dt>
<dd class="c-namevalue-list__body__value">My first value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item two</dt>
<dd class="c-namevalue-list__body__value">A second value</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item three</dt>
<dd class="c-namevalue-list__body__value">A third item with a smile</dd>
</div>
<div class="c-namevalue-list__body">
<dt class="c-namevalue-list__body__name">Item four is so much more better</dt>
<dd class="c-namevalue-list__body__value">More content in the fourth position to demonstrate wrapping</dd>
</div>
</dl>