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

Navigation block group: Clickable 

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

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Utveckling och tillväxt
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Halland ska hålla i längden. Det betyder att det vi gör i dag ska fungera även för framtida generationer.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Hälsa och vård" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Hälsa och vård
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Vi mår bra, tack! Vården i Halland håller mycket hög kvalitet. Så ska det vara även i fortsättningen, därför forskar vi i Halland.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Kultur" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Kultur
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Kulturen lockar. Kulturupplevelser, kreativitet och konstnärlig utveckling gör Halland attraktivt.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Jobb och karriär" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Jobb och karriär
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Jobba med oss i regionen. Tillsammans gör vi skillnad för hallänningarna varje dag – året runt.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Våra skolor" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Våra skolor
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Utbilda dig! Ett naturbruksgymnasium och två folkhögskolor finns i Region Hallands utbud.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Demokrati och politik" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Demokrati och politik
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Var med och påverka! Du har möjlighet att ta del av och påverka det som händer – även mellan valen.
                    </p>
                </div>
            </div>
        </div>
        <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
            <div class="rh-navigation-block rh-element--clickable rh-navigation-block--clickable" tabindex="0">
                <a href="#" class="rh-link--navigation rh-element--clickable-link" title="Om Region Halland" tabindex="-1"></a>

                <div class="rh-navigation-block__header">
                    <span class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-navigation-block__header-icon">
            <span class="icon-arrow-right"></span>
                    </span>

                    <a href="#" class="rh-link--navigation rh-navigation-block__header-title" tabindex="-1">
            Om Region Halland
        </a>
                </div>

                <div class="rh-navigation-block__description hidden-sm">
                    <p class="rh-navigation-block__description-text">
                        Vi är på väg. ”Halland – bästa livsplatsen” är vår vision. Välkommen att följa oss på vägen dit!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{#unless withContainer}}
    {{!-- Default --}}
    <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 '@navigation-block' itemData merge=true}}
                </div>
            {{/each}}
        </div>
    </div>
{{else}}
    <div class="rh-overflow--hidden rh-container-p rh-navigation-block-group">
        <div class="row row-eq-height row-gutters">
            {{#each blocks}}
                <div class="col col-12 md-col-6 lg-col-4 col-item-eq-height">
                    {{render '@navigation-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": {
          "text": "Halland ska hålla i längden. Det betyder att det vi gör i dag ska fungera även för framtida generationer.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Hälsa och vård",
        "description": {
          "text": "Vi mår bra, tack! Vården i Halland håller mycket hög kvalitet. Så ska det vara även i fortsättningen, därför forskar vi i Halland.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Kultur",
        "description": {
          "text": "Kulturen lockar. Kulturupplevelser, kreativitet och konstnärlig utveckling gör Halland attraktivt.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Jobb och karriär",
        "description": {
          "text": "Jobba med oss i regionen. Tillsammans gör vi skillnad för hallänningarna varje dag – året runt.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Våra skolor",
        "description": {
          "text": "Utbilda dig! Ett naturbruksgymnasium och två folkhögskolor finns i Region Hallands utbud.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Demokrati och politik",
        "description": {
          "text": "Var med och påverka! Du har möjlighet att ta del av och påverka det som händer – även mellan valen.",
          "extendClass": "hidden-sm"
        }
      }
    },
    {
      "itemData": {
        "isClickable": true,
        "title": "Om Region Halland",
        "description": {
          "text": "Vi är på väg. ”Halland – bästa livsplatsen” är vår vision. Välkommen att följa oss på vägen dit!",
          "extendClass": "hidden-sm"
        }
      }
    }
  ]
}
  • Content: 
    /* Needed components
@import '../../Atoms/link/_link.scss';
@import '../../Atoms/round-button/_round-button.scss';
@import '../../Molecules/navigation-block/_navigation-block.scss';
*/

.rh-navigation-block-group {
    @if $navigation-block-group__container--background-color {
        background-color: $navigation-block-group__container--background-color;
    }
}
  • URL: /components/raw/navigation-block-group/_navigation-block-group.scss
  • Filesystem Path: components/Organisms/navigation-block-group/_navigation-block-group.scss
  • Size: 365 Bytes
  • Content: 
    {
    "name": "regionhalland/navigation-block-group",
    "description": "Navigation block group",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Roland Hydén",
            "email": "Roland.Hyden@Regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/navigation-block-group/composer.json
  • Filesystem Path: components/Organisms/navigation-block-group/composer.json
  • Size: 314 Bytes

Navigation block group

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

Ändringslogg

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-gutters
    • col-item-eq-height
    • rh-container-p