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

Top links 

<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-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>
 
/* No context defined for this component. */
  • Content: 
    .rh-toplinks{
	display: flex;
 	align-items: center;
 	padding-top: $toplinks--padding-top;
    padding-bottom: $toplinks--padding-bottom;
    @if $toplinks--background-color {
        background-color: $toplinks--background-color;
    }
}

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

.rh-toplinks-nav-item{
	display: inline-block;
	padding-top: $toplinks__nav-item--padding-top;
	padding-bottom: $toplinks__nav-item--padding-bottom;
	margin-right: $toplinks__nav-item--margin-right;
}

.rh-toplinks-nav-link{
    font-size: $toplinks__nav-link--font-size;
    @if $toplinks__nav-link--color {
        color: $toplinks__nav-link--color;
    }
	text-decoration: none;

	&:hover{
		text-decoration: underline;
	}
}
  • URL: /components/raw/toplinks/_toplinks.scss
  • Filesystem Path: components/Organisms/toplinks/_toplinks.scss
  • Size: 711 Bytes
  • Content: 
    {
    "name": "regionhalland/toplinks",
    "description": "Toplinks",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/toplinks/composer.json
  • Filesystem Path: components/Organisms/toplinks/composer.json
  • Size: 286 Bytes
  • Content: 
    /// Organism - Top links
$toplinks--padding-top: $space-3; //0.625em; //10px
$toplinks--padding-bottom: $space-3; //0.625em;
$toplinks--background-color: $white; //false

$toplinks__nav-item--padding-top: $space-4; //0.9375em; //15px
$toplinks__nav-item--padding-bottom: $space-4; //0.9375em;
$toplinks__nav-item--margin-right: $space-4; //0.9375em;

$toplinks__nav-link--font-size: $p-large;
$toplinks__nav-link--color: $black; //false
  • URL: /components/raw/toplinks/toplinks.settings.scss
  • Filesystem Path: components/Organisms/toplinks/toplinks.settings.scss
  • Size: 436 Bytes

Organismen “Toplinks”

Versionshistorik

  • 1.0.0.20200204 Globala variabler används
  • 1.0.0.20191123 Flyttat till gitrepo