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

Image caption 

<figure class="rh-figure">
    <img class="rh-figure__image" src="/images/components/figure/bild.jpg" alt="Text som beskriver bilden">
    <figcaption class="rh-figure__caption">This is a image, with supporting caption</figcaption>
</figure>
 
<figure class="rh-figure">
    <img class="rh-figure__image" src="/images/components/figure/bild.jpg" alt="Text som beskriver bilden">
    <figcaption class="rh-figure__caption">{{caption}}</figcaption>
</figure>
 
{
  "caption": "This is a image, with supporting caption"
}
  • Content: 
    .rh-figure {
    /* Positionering */
    position: $figure--position;

    /* Box-modell/beteende */
    width: $figure--width;

    /* Typografi */
    text-align: $figure--text-align;
    font-size: $figure--font-size;
    text-indent: $figure--text-indent;
    color: $figure--color;

    .rh-figure__image {
        /* Box-modell/beteende */
        width: $figure__image--width;
    }

    .rh-figure__caption {
        /* Box-modell/beteende */
        margin-top: $figure__caption--margin-top;
        padding: $figure__caption--padding;

        /* Visuellt */
        background-color: $figure__caption--background-color;
    }

    @include medium {
        /* Box-modell/beteende */
        width: $figure--medium--width;

        /* Typografi */
        font-size: $figure--medium--font-size;
    }

    @include large {
        /* Box-modell/beteende */
        width: $figure--medium--width;

        /* Typografi */
        font-size: $figure--medium--font-size;
    }
}
  • URL: /components/raw/image-caption/_image-caption.scss
  • Filesystem Path: components/Molecules/image-caption/_image-caption.scss
  • Size: 985 Bytes
  • Content: 
    {
    "name": "regionhalland/image-caption",
    "description": "Image caption",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/image-caption/composer.json
  • Filesystem Path: components/Molecules/image-caption/composer.json
  • Size: 295 Bytes
  • Content: 
    /* ********************** */
/*  Molekylen image caption  */
/* ********************** */

// Grundinställningar
$figure--position: absolute;
$figure--width: 344px;
$figure--text-align: left;
$figure--font-size: $font-size--2xs; //em(12);
$figure--text-indent: 0;
$figure--color: $grey-darkest;

// Medium
$figure--medium--width: 509px;
$figure--medium--font-size: $font-size--small; //em(14);

// Large
$figure--medium--width: 640px;
$figure--medium--font-size: $font-size--medium; //em(15);

// figure__image
$figure__image--width: 100%;

// figure__caption
$figure__caption--margin-top: -$space-1; //-2px;
$figure__caption--padding: $space-2; //10px;
$figure__caption--background-color: $grey-lightest;
  • URL: /components/raw/image-caption/image-caption.settings.scss
  • Filesystem Path: components/Molecules/image-caption/image-caption.settings.scss
  • Size: 706 Bytes

Image caption

Versioner

  • 2.0.2 Globala variabler används
  • 2.0.1 “Stabil” status
  • 2.0.0 Settingsfil och BEM introducerat
  • 1.0.0 första releasen