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

Breadcrumbs 

<nav aria-label="Breadcrumbs" class="rh-breadcrumbs">
    <ol>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Startsidan
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Nivå 1
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Nivå 2
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <span class="rh-breadcrumbs__link" href="" aria-current="page">
                Aktuell sida
            </span>
        </li>
    </ol>
</nav>
 
<nav aria-label="Breadcrumbs" class="rh-breadcrumbs">
    <ol>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Startsidan
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Nivå 1
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <a class="rh-breadcrumbs__link" href="">
                Nivå 2
            </a>
        </li>
        <li class="rh-breadcrumbs__item">
            <span class="rh-breadcrumbs__link" href="" aria-current="page">
                Aktuell sida
            </span>
        </li>
    </ol>
</nav>
 
/* No context defined for this component. */
  • Content: 
    .rh-breadcrumbs {

    /* Visuellt */
    background-color: $white;
    @if $breadcrums--border-bottom {
        border-bottom: $breadcrums--border-bottom;
    }

    @if $breadcrums--border-top {
        border-top: $border-thin--standard $breadcrums--border-top;
    }
    list-style: none;
    padding-bottom: $space-4; //em(15);
    padding-top: $space-4; //em(15);
}

.rh-breadcrumbs__item {

    /* Box-modell/beteende */
    display: inline;

    &:after {

        /* Visuellt */
        @if $breadcrumbs__icon--margin-left {
            margin-left: $breadcrumbs__icon--margin-left;
        }

        @if $breadcrumbs__icon--margin-right {
            margin-right: $breadcrumbs__icon--margin-right;
        }

        /* Typografi */
        color: $grey-base;
        font-weight: normal;
        font-family: $icon--font-family; //"feather";

        /* Visuellt */
        content: "\e844";
    }

    &:last-child {
        &:after {

            /* Visuellt */
            margin-left: 0;
            content: "";
        }
    }
}

.rh-breadcrumbs__link {

    /* Visuellt */
    @if $breadcrumbs__item-link--margin-left {
        margin-left: $breadcrumbs__item-link--margin-left; //em(12);
    }

    @if $breadcrumbs__item-link--margin-right {
        margin-right: $breadcrumbs__item-link--margin-right;
    }

    padding-top: $space-4; //em(15);
    padding-bottom: $space-4; //em(16);

    @include medium {
        padding-bottom: $space-3; //em(14);
    }

    @include large {
        padding-bottom: $space-3; //em(14);
    }

    /* Typografi */
    color: $black;
    font-size: $p-small;

    @include medium {
        font-size: $p-medium;
    }

    @include large {
        font-size: $p-large;
    }

    text-decoration: none;

    &:hover,
    &:active,
    &:focus {
        /* Visuellt */
        border-bottom: $breadcrumbs__item--border-bottom;
    }
}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: components/Organisms/breadcrumbs/_breadcrumbs.scss
  • Size: 1.9 KB
  • Content: 
    /* Organism - Breadcrums */
$breadcrums--border-top: $border-thin--standard $grey-lighter;//false
$breadcrums--border-bottom: $border-thin--standard $grey-lighter;//false

$breadcrumbs__item-link--margin-left: false; //0.75em is default - false
$breadcrumbs__item-link--margin-right: false; //false
$breadcrumbs__item--border-bottom: $border-thin--large $base3-dark ;

$breadcrumbs__icon--margin-left: $space-3; //false
$breadcrumbs__icon--margin-right: $space-3; //false
  • URL: /components/raw/breadcrumbs/breadcrumbs.settings.scss
  • Filesystem Path: components/Organisms/breadcrumbs/breadcrumbs.settings.scss
  • Size: 471 Bytes
  • Content: 
    {
    "name": "regionhalland/breadcrumbs",
    "description": "Breadcrumbs",
    "type": "styleguide-organism",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/breadcrumbs/composer.json
  • Filesystem Path: components/Organisms/breadcrumbs/composer.json
  • Size: 292 Bytes

Organismen “Breadcrumbs”

Planerad utveckling

  • Logik för att dra ihop långa breadcrumbsstigar saknas. Se skiss i Figma.
  • Understrykningen bör vara på ovansidan av det undre sträcket.
  • Hbs-filen bör gås igenom - om den är en organism skall den inkludera en molekyl.

Versionshistorik

1.0.0.20200203

  • Globala variabler används.

1.0.0.20191127

  • Specificerat planerad utveckling och satt status till “rework”.

1.0.0.201911251100 (2019-11-25)

  • Bytt namn för filerna från breadcrums* till breadcrumbs* (b var saknas)

1.0.0.20191123

  • Flyttat till gitrepo