Header

<header class="o-header">
    <div class="wrapper">
        <div class="row justify-content-between align-items-center flex-nowrap">
            <div class="grid-auto">
                <a href="/" class="o-header__logo-link">
                    <span class="o-header__logo"><svg class="logotype">
                            <use xlink:href="#logotype-default"></use>
                        </svg>
                    </span>
                    <span class="u-visuallyhidden">Till startsidan</span>
                </a>
            </div>
            <div class="grid">
                <nav class="a-main-menu">
                    <ul class="a-main-menu__list">
                        <li class="u-hidden-mobile">
                            <a href="#" class="a-main-menu__list__link">
                                <span class="a-main-menu__list__text">Kunskap</span>
                            </a>

                        </li>
                        <li class="u-hidden-mobile">
                            <a href="#" class="a-main-menu__list__link">
                                <span class="a-main-menu__list__text">Innovation</span>
                            </a>

                        </li>
                        <li class="u-hidden-mobile">
                            <a href="#" class="a-main-menu__list__link is-current">
                                <span class="a-main-menu__list__text">Domäner</span>
                            </a>

                        </li>
                        <li class="u-hidden-mobile">
                            <button type="button" class="a-main-menu__list__link" aria-expanded="false" data-a11y-toggle="dropdown">
                                <span class="a-main-menu__list__text">Ämnen</span>
                                <div class="icon-arrow-down"></div>
                            </button>

                            <ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Desinformation</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Föräldraskap</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Integritet</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Källkritik</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Ordlista</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Så funkar internet</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Sökkritik</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Vanliga IT-brott</a>
                                </li>
                                <li class="a-main-menu__subnav__item">
                                    <a href="#">Yttrandefrihet</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span class="a-main-menu__list__button">
                                <a href="#" class="a-button a-button--small a-button--lemon">
                                    <span class="a-button__text">Bli medlem</span>
                                </a>
                            </span>
                            <span class="a-main-menu__list__button">
                                <a href="/medlem/rhedman" class="a-button a-button--icon a-button--icon-left a-button--transparent">
                                    <span class="a-button__text u-nowrap">Min sida</span>
                                    <svg class="icon a-button__icon">
                                        <use xlink:href="#icon-user"></use>
                                    </svg>
                                </a>
                            </span>

                        </li>
                        <li>
                            <div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
                                <a rel="nofollow" accesskey="L" class="rsbtn_play a-main-menu__list__link is-top-level" aria-describedby="readspeaker-info" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=10645&amp;lang=<?php echo iis_set_language( 'sv_SE' ); ?>&amp;voice=Maja&amp;readclass=site__main&amp;url=<?php the_permalink(); ?>">
                                    <span class="a-main-menu__list__text rsbtn_left rsimg rspart"><span class="rsbtn_text"><span class="u-nowrap">Lyssna</span></span></span>
                                    <span class="rsbtn_right rsimg rsplay rspart"></span>
                                    <div class="a-button a-button--standalone-icon a-button--icon u-p-0">
                                        <svg class="icon a-button__icon ">
                                            <use xlink:href="#icon-speaker"></use>
                                        </svg>
                                    </div>
                                    <span class="u-visuallyhidden" id="readspeaker-info">Lyssna på sidans text med ReadSpeaker</span>
                                </a>
                            </div>

                        </li>
                        <li class="u-hidden-mobile">
                            <button type="button" class="a-main-menu__list__link js-toggle-domain-search" aria-expanded="false" data-a11y-toggle="domain-search">
                                <span class="a-main-menu__list__text">Sök ledig domän</span>
                                <div class="icon-arrow-down"></div>
                            </button>

                        </li>
                        <li>
                            <button type="button" class="a-main-menu__list__link js-toggle-mega-menu" aria-expanded="false" data-a11y-toggle="mega-menu">
                                <span class="a-main-menu__list__text">Meny</span>
                                <div class="icon-hamburger"></div>
                            </button>

                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</header>
<header class="o-header">
	<div class="wrapper">
		<div class="row justify-content-between align-items-center flex-nowrap">
			<div class="grid-auto">
				<a href="{{logo_link_href}}" class="o-header__logo-link">
					<span class="o-header__logo">{{> @logotype id="default"}}</span>
					<span class="u-visuallyhidden">{{logo_link_text}}</span>
				</a>
			</div>
			<div class="grid">
				{{ render '@main-menu'}}
			</div>
		</div>
	</div>
</header>
{
  "logo_link_text": "Till startsidan",
  "logo_link_href": "/",
  "label": "sök en .se- eller .nu-domän",
  "controls": ""
}
  • Content:
    @charset 'UTF-8';
    
    @include organism(header) {
    	position: relative;
    	z-index: z_index(foregroundMinus);
    	border-bottom: 1px solid $color-ash;
    	background-color: $color-snow;
    
    	@include e(logo-link) {
    		display: flex;
    		align-items: center;
    		height: 100%;
    		padding: 0;
    
    		@include bp-up(md) {
    			padding: rhythm(2) 0;
    		}
    	}
    
    	@include b(logotype) {
    		width: 100%;
    		max-width: rhythm(10);
    		height: rhythm(2.96);
    		overflow: visible;
    	}
    
    	@include bp-up(md) {
    		@include b(logotype) {
    			max-width: rhythm(20);
    			height: rhythm(5.92);
    		}
    	}
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/organisms/header/_header.scss
  • Size: 547 Bytes

No notes defined.