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

Sidhuvud 

<div class="rh-header">
    <div class="rh-logo-sitename">
        <img class="rh-logo" src="/images/components/logo/rh_logo.svg" alt="Region Halland">
        <span class="rh-sitename h3">Vårdgivare Halland</span>
    </div>
    <div class="rh-toplinks">
        <ul class="rh-toplinks-nav">
            <li class="rh-toplinks-nav-item">
                <a class="icon-link rh-round-button"></a>
                <a class="rh-toplinks-nav-link" href="#">Lorem ipsum</a>
            </li>
            <li class="rh-toplinks-nav-item">
                <a class="icon-layers rh-round-button"></a>
                <a class="rh-toplinks-nav-link" href="#">Lorem ipsum</a>
            </li>
            <li class="rh-toplinks-nav-item">
                <a class="icon-alert-triangle rh-round-button"></a>
                <a class="rh-toplinks-nav-link" href="#">Driftinformation</a>
            </li>
            <li class="rh-toplinks-nav-item">
                <a class="icon-headphones rh-round-button"></a>
                <a class="rh-toplinks-nav-link" href="#">Talande webb</a>
            </li>
            <li class="rh-toplinks-nav-item">
                <a class="icon-log-in rh-round-button"></a>
                <a class="rh-toplinks-nav-link" href="#">E-tjänster</a>
            </li>
        </ul>
    </div>

    <div class="rh-header__search-desktop">
        <div class="rh-search-bar">
            <input type="text" class="rh-search-bar__input" placeholder="Placeholder">
            <button type="submit" class="rh-search-bar__button">
		Sök
	</button>
        </div>
    </div>
    <div class="rh-header__menu">
        <span style="float:left; padding-right:1ex;">
			<div class="rh-button-circle rh-button-circle--default rh-button-circle--large" tabindex="0">
			    <span class="icon-search rh-button-circle__icon"></span>
    </div>
    </span>
    <span style="float:right;">
			<script>
    /* The script is creating demo environment
        overflow-x: hidden; //Must have
        height: 101vh; //The webpage has always scrollbar
    */
    var bodyTag = document.getElementsByTagName("BODY")[0];
    bodyTag.setAttribute("style", "padding: 0; overflow-x: hidden; height: 101vh;");
</script>

<div id="rh-menu-main-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large" tabindex="0">
    <span class="icon-menu rh-button-circle__icon"></span>
</div id="rh-menu-main-button">

<!-- Standard version (3 levels) -->
<div class="rh-menu__overlay rh-dp--none"></div>
<div id="rh-menu-body" class="rh-menu__body rh-pos--fixed">
    <div class="rh-menu__top-bar">
        <div id="rh-menu-close-button" class="rh-button-circle rh-button-circle--default rh-button-circle--large rh-menu__button-close">
            <span class="icon-x rh-button-circle__icon"></span>
        </div>
    </div>

    <div class="rh-menu__offset-top"></div>

    <div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Halland – bästa livsplatsen
            </a>

        </div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Våra skolor
            </a>

            <div id="7" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
        </div>

        <div id="sub7" class="rh-menu__item-sub-container">
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Katrinebergs folkhögskola
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Löftadalens folkhögskola
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Munkagårdsgymnasiet
                </a>

            </div>

        </div>

        <div class="rh-menu__item rh-menu__item-level-1">
            <a href="#" class="rh-link--navigation rh-menu__link-level-1">
                Om Region Halland
            </a>

            <div id="2" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-parent">
                <span class="icon-plus"></span>
            </div>
        </div>

        <div id="sub2" class="rh-menu__item-sub-container">
            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Region Hallands organisation
                </a>

            </div>

            <div class="rh-menu__item rh-menu__item-sub-item rh-pl-2">
                <a href="#" class="rh-link--navigation rh-menu__link">
                    Vision, mål och uppdrag
                </a>

                <div id="4" class="rh-button-circle rh-button-circle--default rh-button-circle--small rh-menu__item-button rh-menu__item-button-sub-item">
                    <span class="icon-plus"></span>
                </div>
            </div>

            <div id="sub4" class="rh-menu__item-sub-container rh-menu__item-sub-container-style-1">
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Regional utvecklingsstrategi 2035
                    </a>
                </div>
                <div class="rh-menu__item rh-menu__item-sub-item rh-pl-3">
                    <a href="#" class="rh-link--navigation rh-menu__link">
                        Regional utvecklingsstrategi 2050
                    </a>
                </div>
            </div>

        </div>

    </div>

    <div class="rh-menu__offset-bottom"></div>
</div>

</span>
</div>
</div>
 
<div class="rh-header">
	{{render '@logo-sitename'}}
	{{render '@toplinks' }}
	<div class="rh-header__search-desktop">
		{{render '@search-field'}}
	</div>
	<div class="rh-header__menu">
		<span style="float:left; padding-right:1ex;">
			{{> @button-circle className="rh-button-circle" modifier="large" icon="icon-search"}}
		</span>
		<span style="float:right;">
			{{render '@menu--default'}}
		</span>
	</div>
</div>
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    .rh-header{
	/* Box-modell/beteende */
	display: flex;
	flex-wrap: wrap;
	padding-top: $space-3; //em(11);
	padding-bottom: $space-3; //em(11);
	width: 100%;

	/* Visuellt */
	align-items: center;
	background-color: $white;

	@include medium {
		padding-top: $space-5; //em(18);
		padding-bottom: $space-5; //em(18);
	}

	.rh-logo-sitename-title {
		display: none;
		@include medium { display:inline-block;}
	}

	.rh-toplinks {
		margin-left:auto;
	}

	&__search-desktop {
		display: none;

		@include large{
			display: inline-block;
		}
	}

	&__menu {
		display: inline-block;
		margin-left: auto;
		@include large{
			display: none;
		}
	}
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: components/Organisms/header/_header.scss
  • Size: 645 Bytes
  • Content: 
    {
    "name": "regionhalland/header",
    "description": "header",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/header/composer.json
  • Filesystem Path: components/Organisms/header/composer.json
  • Size: 282 Bytes

Organismen “Header”

Versionshistorik

  • 1.0.0.20200204 Globala variabler används.
  • 1.0.0.20200123 Uppdaterat för att matcha ändringar i button circle.
  • 1.0.0.20191227 Rensat bort demo-kod + korrigerat klassnamnen enligt BEM.
  • 1.0.0.20191123 Flyttat till gitrepo