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

Block group: With Container 

<div class="rh-overflow--hidden rh-container-p rh-block-group">
    <div class="row row-eq-height row-gutters">
        <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
            <div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Utveckling och tillväxt" tabindex="-1"></a>

                <div class="rh-block">
                    <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">

                    <div class="rh-block-content">
                        <p class="h3">
                            <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">Utveckling och tillväxt</a>
                        </p>

                        <p class="rh-block-content__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id diam in erat egestas vehicula eu accumsan ligula.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
            <div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Terapirekommendationer" tabindex="-1"></a>

                <div class="rh-block">
                    <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">

                    <div class="rh-block-content">
                        <p class="h3">
                            <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">Terapirekommendationer</a>
                        </p>

                        <p class="rh-block-content__description">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
            <div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Analysförteckning" tabindex="-1"></a>

                <div class="rh-block">
                    <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">

                    <div class="rh-block-content">
                        <p class="h3">
                            <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">Analysförteckning</a>
                        </p>

                        <p class="rh-block-content__description">Aldu integer id metus pellentesque, suscipit mauris vel, placerat purus. Vestibulum diam elit.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
            <div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="VAS" tabindex="-1"></a>

                <div class="rh-block">
                    <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">

                    <div class="rh-block-content">
                        <p class="h3">
                            <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">VAS</a>
                        </p>

                        <p class="rh-block-content__description">Mauris id consectetur lorem. Cras volutpat massa leo. Sed a enim ultricies, dapibus ex nec.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
            <div class="rh-block-box rh-block--clickable rh-element--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Avgiftshandboken" tabindex="-1"></a>

                <div class="rh-block">
                    <img src="/images/pressbild.jpg" alt="Text som beskriver bilden">

                    <div class="rh-block-content">
                        <p class="h3">
                            <a href="#" class="rh-block-content__title rh-link--navigation" tabindex="-1">Avgiftshandboken</a>
                        </p>

                        <p class="rh-block-content__description">Mauris id consectetur lorem. Cras volutpat massa leo. Sed a enim ultricies, dapibus ex nec.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{#unless withContainer}}
    <div class="rh-overflow--hidden">
        <div class="row row-eq-height row-gutters">
            {{#each blocks}}
                <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
                    {{render '@block' itemData merge=true}}
                </div>
            {{/each}}
        </div>
    </div>
{{else}}
    <div class="rh-overflow--hidden rh-container-p rh-block-group">
        <div class="row row-eq-height row-gutters">
            {{#each blocks}}
                <div class="col col-12 md-col-6 lg-col-4 xl-col-3 col-item-eq-height">
                    {{render '@block' itemData merge=true}}
                </div>
            {{/each}}
        </div>
    </div>
{{/unless}}
 
{
  "name": "default",
  "status": "wip",
  "withContainer": true,
  "blocks": [
    {
      "itemData": {
        "isClickable": true,
        "title": "Utveckling och tillväxt",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id diam in erat egestas vehicula eu accumsan ligula."
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Terapirekommendationer",
        "description": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae."
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Analysförteckning",
        "description": "Aldu integer id metus pellentesque, suscipit mauris vel, placerat purus. Vestibulum diam elit."
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "VAS",
        "description": "Mauris id consectetur lorem. Cras volutpat massa leo. Sed a enim ultricies, dapibus ex nec."
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Avgiftshandboken",
        "description": "Mauris id consectetur lorem. Cras volutpat massa leo. Sed a enim ultricies, dapibus ex nec."
      }
    }
  ]
}
  • Content: 
    /* Needed components
-> /components/Molecules/block/_block.scss
*/

.rh-block-group {
    @if $block-group__container--background-color {
        background-color: $block-group__container--background-color;
    }
}
  • URL: /components/raw/block-group/_block-group.scss
  • Filesystem Path: components/Organisms/block-group/_block-group.scss
  • Size: 214 Bytes
  • Content: 
    {
    "name": "regionhalland/block-group",
    "description": "Block group",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/block-group/composer.json
  • Filesystem Path: components/Organisms/block-group/composer.json
  • Size: 292 Bytes

Organismen “Block group”

  • Komponents prefix: rh-block-group*
  • Filplats: /components/Organism/block-group

Ändringslogg

1.0.0.20200203 (2020-02-03)

  • Globala variabler används.

1.0.0.20191123 - Flyttat till gitrepo

1.0.0-201910221700 (2019-10-22)

  • Förbättringen är baserad på Stilguides version 7.2.0 och kommer finnas i nästa version > 7.2.0
  • Användning av generella klasser i global:
    • row-eq-height
    • row-gutters
    • col-item-eq-height
    • rh-container-p