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

Page nav 

<div class="rh-page-nav-container">
    <h3 class="rh-page-nav-title">Sidans innehåll</h3>

    <ul class="rh-page-nav">
        <li class="rh-page-nav-item">
            <a class="rh-link" href="">Link Alternative</a>
        </li>
        <li class="rh-page-nav-item">
            <a class="rh-link" href="">Link Alternative</a>
        </li>
        <li class="rh-page-nav-item">
            <a class="rh-link" href="">Link Alternative</a>
        </li>
        <li class="rh-page-nav-item">
            <a class="rh-link" href="">Link Alternative</a>
        </li>
    </ul>
</div>
 
<div class="rh-page-nav-container">
	<h3 class="rh-page-nav-title">{{title}}</h3>

	<ul class="rh-page-nav">
        {{#each links}}
        <li class="rh-page-nav-item">
            <a class="rh-link" href="{{toPage}}">{{text}}</a>
        </li>
        {{/each}}
	</ul>	
</div>
 
{
  "title": "Sidans innehåll",
  "links": [
    {
      "title": "",
      "toPage": "",
      "text": "Link Alternative"
    },
    {
      "title": "",
      "toPage": "",
      "text": "Link Alternative"
    },
    {
      "title": "",
      "toPage": "",
      "text": "Link Alternative"
    },
    {
      "title": "",
      "toPage": "",
      "text": "Link Alternative"
    }
  ]
}
  • Content: 
    .rh-page-nav-container {
    /* Positionering */
    position: -webkit-sticky;
    position: sticky;
    top: 0;

    /* Visuellt */
    background-color: $white;

    .rh-page-nav-title {
        /* Box-modell/beteende */
        margin-bottom: $space-1;//em(5);

        /* Typografi */
        font-size: $font-size--3xl; //em(24);
    }

    .rh-page-nav {
        /* Box-modell/beteende */
        padding-bottom: $space-3;//em(10);
        padding-left: $space-3;//em(10);
        border-left: 2px solid $grey-lighter;

        &-item {
            /* Box-modell/beteende */
            margin-top: $space-5;//em(20);
            margin-left: -$space-3; //em(-12);
            padding-left: $space-3; //em(10);
            padding-bottom: $space-1; //em(5);

            /* Visuellt */
            border-left: 2px solid transparent;

            /* Typografi */
            font-size: $p-large;

            &:first-child {
                /* Box-modell/beteende */
                margin-top: 0;
            }

            &:hover,
            &:active {
                /* Visuellt */
                border-left: 2px solid $color_primary;
            }
        }
    }
}
  • URL: /components/raw/page-nav/_page-nav.scss
  • Filesystem Path: components/Molecules/page-nav/_page-nav.scss
  • Size: 1.2 KB
  • Content: 
    {
    "name": "regionhalland/page-nav",
    "description": "Page nav",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/page-nav/composer.json
  • Filesystem Path: components/Molecules/page-nav/composer.json
  • Size: 285 Bytes

Molekylen “Page nav”

Versionshistorik

  • 1.0.0.20200130 Globala variabler används
  • 1.0.0.20191122 Flyttat till gitrepo