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

Block shortcuts 

<h1 class="h3 rh-shortcuts__title" id="921921">Snabblänkar</h1>
<hr class="rh-shortcuts__hr">

<ul class="rh-shortcuts__listgroup" aria-labelledby="921921">
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Lorem ipsum dolor sit amet</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Sit magnis est</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Nec mi, integer augue pharetra</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Integer tristique.</a>
    </li>
</ul>
 
<h1 class="h3 rh-shortcuts__title" id="921921">Snabblänkar</h1>
<hr class="rh-shortcuts__hr">

<ul class="rh-shortcuts__listgroup" aria-labelledby="921921">
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Lorem ipsum dolor sit amet</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Sit magnis est</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Nec mi, integer augue pharetra</a>
    </li>
    <li class="rh-shortcuts__item">
        <a href="#" class="rh-shortcuts__item-link" title="Förklara vart länken leder">Integer tristique.</a>
    </li>
</ul>
 
{
  "caption": "",
  "name": ""
}
  • Content: 
    .rh-shortcuts__title{
	/* Visuellt */
	color: $rh-shortcuts__title--color;
}

.rh-shortcuts__hr{
	/* Box-modell/beteende */
	margin-bottom: $rh-shortcuts-hr--margin-bottom;
	width: $rh-shortcuts-hr--width;

	/* Visuellt */
	border-bottom: $rh-shortcuts-hr--border-bottom;
	border-left: $rh-shortcuts-hr--border-left;
	border-right: $rh-shortcuts-hr--border-right;
	border-top: $rh-shortcuts-hr--border-top;

	@include medium {
		border: $rh-shortcuts-hr--medium--border;
	}
}

.rh-shortcuts__listgroup {
	/* Box-modell/beteende */
	border-left: $rh-shortcuts__listgroup--border-left;

	/* Visuellt */
	background-color: $rh-shortcuts__listgroup--background-color;
	border-radius: $rh-shortcuts__listgroup--border-radius;
	padding: $rh-shortcuts__listgroup--padding;
}

.rh-shortcuts__item {
	/* Box-modell/beteende */
	margin-bottom: $rh-shortcuts__item--margin-bottom;

	/* Visuellt */
	color: $rh-shortcuts__item--color;

	/* Typografi */
	font-size: $rh-shortcuts__item--font-size;

	@include medium {
		font-size: $rh-shortcuts__item--medium--font-size;
	}

	@include large {
		font-size: $rh-shortcuts__item--large--font-size;
	}

	&:last-child{
		margin-bottom: $rh-shortcuts__item--last-child--margin-bottom;
	}
}

.rh-shortcuts__item-link{
	/* Box-modell/beteende */
	display: $rh-shortcuts__item-link--display;

	/* Visuellt */
	cursor: $rh-shortcuts__item-link--cursor;

	/* Typografi */
	color: $rh-shortcuts__item-link--color;
	font-size: $rh-shortcuts__item-link--font-size;
	text-decoration: $rh-shortcuts__item-link--text-decoration;

	&:hover,
	&:active {
		color: $rh-shortcuts__item-link--hover-active--color;
	}

	&:visited {
		color: $rh-shortcuts__item-link--visited;
	}

	&:focus {
		background-color: $rh-shortcuts__item-link--focus--background-color;
		color: $rh-shortcuts__item-link--focus--color;
		outline: $rh-shortcuts__item-link--focus--outline;
		padding: $rh-shortcuts__item-link--focus--padding;
		border-radius: $rh-shortcuts__item-link--focus--border-radius;
	}
}
  • URL: /components/raw/block-shortcuts/_block-shortcuts.scss
  • Filesystem Path: components/Molecules/block-shortcuts/_block-shortcuts.scss
  • Size: 2 KB
  • Content: 
    // Title
$rh-shortcuts__title--color: $black;

// Hr
$rh-shortcuts-hr--width: 100%;
$rh-shortcuts-hr--margin-bottom: 1.375em; //em(22);
$rh-shortcuts-hr--border-top: 0.5px solid $complementary2;
$rh-shortcuts-hr--border-left: 0;
$rh-shortcuts-hr--border-bottom: 0;
$rh-shortcuts-hr--border-right: 0;

//Hr - Medium
$rh-shortcuts-hr--medium--border: 2px solid $complementary2;

// Listgroup
$rh-shortcuts__listgroup--padding: 0.9375em; //em(15);
$rh-shortcuts__listgroup--background-color: $complementary2-light;
$rh-shortcuts__listgroup--border-left: 5px solid $complementary2;
$rh-shortcuts__listgroup--border-radius: $border-radius--standard;

// Shortcuts item
$rh-shortcuts__item--margin-bottom: 2.1875em; //em(35);
$rh-shortcuts__item--color: $black;
$rh-shortcuts__item--font-size: $p-medium;
$rh-shortcuts__item--last-child--margin-bottom: 0;

// Shortcuts item - medium
$rh-shortcuts__item--medium--font-size: $p-medium;

// Shortcuts item - large
$rh-shortcuts__item--large--font-size: $p-large;

// Shortcuts item link
$rh-shortcuts__item-link--display: inline-block;
$rh-shortcuts__item-link--cursor: pointer;
$rh-shortcuts__item-link--font-size: inherit;
$rh-shortcuts__item-link--text-decoration: underline;
$rh-shortcuts__item-link--color: $black;
$rh-shortcuts__item-link--hover-active--color: $color-primary;
$rh-shortcuts__item-link--hover-active--text-decoration: none;
$rh-shortcuts__item-link--visited: $link-visited;

// Shortcuts item link - foucs
$rh-shortcuts__item-link--focus--background-color: $complementary2;
$rh-shortcuts__item-link--focus--color: $black;
$rh-shortcuts__item-link--focus--outline: none;
$rh-shortcuts__item-link--focus--padding: .3ex;
$rh-shortcuts__item-link--focus--border-radius: $border-radius--standard;
  • URL: /components/raw/block-shortcuts/block-shortcuts.settings.scss
  • Filesystem Path: components/Molecules/block-shortcuts/block-shortcuts.settings.scss
  • Size: 1.8 KB
  • Content: 
    {
    "name": "regionhalland/block-shortcuts",
    "description": "Block shortcuts - snabblänkar",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/block-shortcuts/composer.json
  • Filesystem Path: components/Molecules/block-shortcuts/composer.json
  • Size: 314 Bytes
  • Handle: @block-shortcuts
  • Preview:
  • Filesystem Path: components/Molecules/block-shortcuts/block-shortcuts.hbs

Shortcuts

Implementering

  • Tänk på att generera ett unikt id till h och ul-taggarna.
  • Justera h1-taggen för att matcha din sidas rubrikstruktur. Använd klasserna h1-h3 för att styra utseendet separat från strukturen.

Versioner

  • 1.0.3 (2020-02-03) Förbättring av config.json
  • 1.0.2 (2020-01-30) Globala variabler används.
  • 1.0.0-20191105 Nya klassnamn, settingsfil introducerad, delvis ny markup och den blå varianten raderades.