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

Puffar 

<div class="rh-blurb mx1 my2">
    <div class="rh-blurb__hero-container">
        <img src="https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7">
    </div>

    <div class="rh-blurb__description mx2 pt2">
        <h3>
            <a href="/" target="#">Länkad rubrik</a>
        </h3>
        <p>Här ligger innehållstexten</p>
    </div>
</div>
 
<div class="rh-blurb mx1 my2">
    <div class="rh-blurb__hero-container">
        <img src="{{imageUrl}}">
    </div>
    
    <div class="rh-blurb__description mx2 pt2">
        <h3>
            <a href="/" target="#">{{title}}</a>
        </h3>
        <p>{{description}}</p>
    </div>
</div>
 
{
  "title": "Länkad rubrik",
  "description": "Här ligger innehållstexten",
  "imageUrl": "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7"
}
  • Content: 
    .rh-blurb {
    /* Visuellt */
    border-bottom: 4px solid #C3DCC1;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;

    .rh-blurb__hero-container {
        /* Positionering */
        position: relative;

        /* Box-modell/beteende */
        height: 200px;
        overflow: hidden;

        img {
            /* Positionering */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            /* Box-modell/beteende */
            width: 100%;
        }
    }

    .rh-blurb__description {
        /* Box-modell/beteende */
        overflow: hidden;
        min-height: 20ex;

        h3 {
            /* Typografi */
            line-height: 1.3;

            a {
                /* Typografi */
                color: black;
            }
        }

        p {
            /* Typografi */
            line-height: 1.4;
        }

        @include medium {
            /* Box-modell/beteende */
            height: 23ex;
        }

        @include large {
            /* Box-modell/beteende */
            height: 20ex;
        }
    }
}
  • URL: /components/raw/blurbs/_blurbs.scss
  • Filesystem Path: components/Molecules/blurbs/_blurbs.scss
  • Size: 1.1 KB
  • Content: 
    {
    "name": "regionhalland/blurbs",
    "description": "Blurbs",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/blurbs/composer.json
  • Filesystem Path: components/Molecules/blurbs/composer.json
  • Size: 281 Bytes

Molekylen “Blurbs”

Versionshistorik

  • 1.0.0.20191121 Flyttat till gitrepo