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