BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

KeyValue 

<dl class="rh-key-value">
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Löksås</dt>
        <dd class="rh-key-value__value">Löksås ipsum nya rännil varit sorgliga varit se verkligen kom omfångsrik</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Rännil</dt>
        <dd class="rh-key-value__value">Stora smultron vad kom groda regn groda, upprätthållande trevnadens att när sitt ser, redan blivit i så tre. Nu sällan från gamla nya rot, händer tidigare redan hav, dock smultron nu olika.</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Stig faktor där</dt>
        <dd class="rh-key-value__value">verkligen kom omfångsrik</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Stora smultron</dt>
        <dd class="rh-key-value__value">Genom mjuka enligt plats del tidigare ser sjö precis därmed hela bra sista denna häst söka häst</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Groda</dt>
        <dd class="rh-key-value__value">Brunsås ingalunda äng plats dock brunsås</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Brunsås</dt>
        <dd class="rh-key-value__value">färdväg</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Träutensilierna</dt>
        <dd class="rh-key-value__value">verkligen kom omfångsrik</dd class="rh-key-value__value">
    </div>
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">Se bäckasiner och nya</dt>
        <dd class="rh-key-value__value">Rot björnbär det olika dimmhöljd vid tiden göras se, sig sorgliga bland göras själv om inom när, nya kunde ser blivit göras har nu.</dd class="rh-key-value__value">
    </div>
</dl>
 
<dl class="{{className}}">
{{#each pair}}
    <div class="rh-key-value__pair">
        <dt class="rh-key-value__key">{{key}}</dt>
        <dd class="rh-key-value__value">{{value}}</dd  class="rh-key-value__value">
    </div>
{{/each}}
</dl>
 
{
  "name": "default",
  "className": "rh-key-value",
  "pair": [
    {
      "key": "Löksås",
      "value": "Löksås ipsum nya rännil varit sorgliga varit se verkligen kom omfångsrik"
    },
    {
      "key": "Rännil",
      "value": "Stora smultron vad kom groda regn groda, upprätthållande trevnadens att när sitt ser, redan blivit i så tre. Nu sällan från gamla nya rot, händer tidigare redan hav, dock smultron nu olika."
    },
    {
      "key": "Stig faktor där",
      "value": "verkligen kom omfångsrik"
    },
    {
      "key": "Stora smultron",
      "value": "Genom mjuka enligt plats del tidigare ser sjö precis därmed hela bra sista denna häst söka häst"
    },
    {
      "key": "Groda",
      "value": "Brunsås ingalunda äng plats dock brunsås"
    },
    {
      "key": "Brunsås",
      "value": "färdväg"
    },
    {
      "key": "Träutensilierna",
      "value": "verkligen kom omfångsrik"
    },
    {
      "key": "Se bäckasiner och nya",
      "value": "Rot björnbär det olika dimmhöljd vid tiden göras se, sig sorgliga bland göras själv om inom när, nya kunde ser blivit göras har nu."
    }
  ],
  "extendClass": ""
}
  • Content: 
    .rh-key-value {
    /* Visuellt */
    background-color: $RH-KEY-VALUE--BACKGROUND-COLOR;
    border-radius: $RH-KEY-VALUE--BORDER-RADIUS;
    padding-bottom: $RH-KEY-VALUE--PADDING-BOTTOM;
    padding-left: $RH-KEY-VALUE--PADDING-LEFT;
    padding-right: $RH-KEY-VALUE--PADDING-RIGHT;
    padding-top: $RH-KEY-VALUE--PADDING-TOP;

    /* Typografi */
    line-height: $RH-KEY-VALUE--LINE-HEIGHT;
    color: $RH-KEY-VALUE--COLOR;

    /* Övrigt */
    column-count: $RH-KEY-VALUE--COLUMN-COUNT;
    column-width: $RH-KEY-VALUE--COLUMN-WIDTH;
    column-gap: $RH-KEY-VALUE--COLUMN-GAP;

    &__pair {
        /* Visuellt */
        padding-bottom: $RH-KEY-VALUE__PAIR--PADDING-BOTTOM;
    }

    &__key {
        /* Box-modell/beteende */
        display: inline;

        /* Typografi */
        font-weight: $RH-KEY-VALUE__KEY--FONT-WEIGHT;
    }

    &__key:after {
        content: ":";
    }

    &__value {
        /* Box-modell/beteende */
        display: inline;
    }

    @include medium {
        /* Visuellt */
        padding-left: $RH-KEY-VALUE--MEDIUM--PADDING-LEFT;
        padding-right: $RH-KEY-VALUE--MEDIUM--PADDING-RIGHT;
        padding-top: $RH-KEY-VALUE--MEDIUM--PADDING-TOP;
        padding-bottom: $RH-KEY-VALUE--MEDIUM--PADDING-BOTTOM;
        column-gap: $RH-KEY-VALUE--MEDIUM--COLUMN-GAP;
        column-count: $RH-KEY-VALUE--MEDIUM--COLUMN-COUNT;
    }

    @include large {
        /* Övrigt */
        column-count: $RH-KEY-VALUE--LARGE--COLUMN-COUNT;
    }
}
  • URL: /components/raw/key-value/_key-value.scss
  • Filesystem Path: components/Atoms/key-value/_key-value.scss
  • Size: 1.5 KB
  • Content: 
    {
    "name": "regionhalland/key-value",
    "description": "En key value-atom",
    "type": "styleguide-atom",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": ""
        }
    ],
    "require": {}
}
  • URL: /components/raw/key-value/composer.json
  • Filesystem Path: components/Atoms/key-value/composer.json
  • Size: 263 Bytes
  • Content: 
    /* ------------------ */
/* Atomen "Key/value" */
/* ------------------ */

// Key/value grundinställningar (rh-key-value)
$RH-KEY-VALUE--BACKGROUND-COLOR: $grey-lighter;
$RH-KEY-VALUE--BORDER-RADIUS: $border-radius--large;
$RH-KEY-VALUE--PADDING-BOTTOM: $space-6;
$RH-KEY-VALUE--PADDING-LEFT: $space-6;
$RH-KEY-VALUE--PADDING-RIGHT: $space-6;
$RH-KEY-VALUE--PADDING-TOP: $space-6;
$RH-KEY-VALUE--LINE-HEIGHT: $line-height--xl;
$RH-KEY-VALUE--COLOR: $black;
$RH-KEY-VALUE--COLUMN-COUNT: 2;
$RH-KEY-VALUE--COLUMN-WIDTH: $space-40;
$RH-KEY-VALUE--COLUMN-GAP: $space-6;

// Medium-modifiern
$RH-KEY-VALUE--MEDIUM--PADDING-LEFT: $space-6;
$RH-KEY-VALUE--MEDIUM--PADDING-RIGHT: $space-6;
$RH-KEY-VALUE--MEDIUM--PADDING-TOP: $space-6;
$RH-KEY-VALUE--MEDIUM--PADDING-BOTTOM: $space-2;
$RH-KEY-VALUE--MEDIUM--COLUMN-GAP: $space-6;
$RH-KEY-VALUE--MEDIUM--COLUMN-COUNT: 2;

// Large-modifiern
$RH-KEY-VALUE--LARGE--COLUMN-COUNT: 3;

// rh-key-value__pair
$RH-KEY-VALUE__PAIR--PADDING-BOTTOM: $space-4;

// rh-key-value__key
$RH-KEY-VALUE__KEY--FONT-WEIGHT: bold;
  • URL: /components/raw/key-value/key-value.settings.scss
  • Filesystem Path: components/Atoms/key-value/key-value.settings.scss
  • Size: 1.1 KB

Atomen “Key/value”

Versionshistorik

  • 1.0.0.20200212
    • Uppdaterat markup till dl-syntax vilket gör hela atomen till minsta beståndsdelen. Listing-freetext försvinner därmed som molekyl.
  • 1.0.0.20200206
    • Första version