Jordbruksverkets Designsystem

<div class="c-banner c-banner--notis" role="banner">
    <div class="c-banner__content">
        <span class="c-banner-icon sjv-i-info" tabindex="-1"></span>
        <div class="c-banner__text">
            <p> Påverkades du av torkan i sommar? Då kan du ha rätt till stöd och ersättning. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink"> Läs mer om stöd och ersättning </button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

<div class="c-banner c-banner--error" role="banner">
    <div class="c-banner__content">
        <span class="c-banner-icon sjv-i-fel" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><strong>SAM Internet är stängt.</strong> Vi håller på att uppdatera SAM Internet. Du kan därför inte
                använda tjänsten. Vi
                räknar med att öppna igen den 20 mars klockan 8.00. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

<div class="c-banner c-banner--warning" role="banner">
    <div class="c-banner__content ">
        <span class="c-banner-icon sjv-i-varning" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><strong>SAM Internet är stängt den 19 mars.</strong> Vi uppdaterar SAM Internet den 19 mars mellan
                klockan 8 och 12. Under den
                perioden kan du inte använda SAM Internet. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">Läs om SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

<div class="c-banner c-banner--success" role="banner">
    <div class="c-banner__content">
        <span class="c-banner-icon sjv-i-framgang" tabindex="-1"></span>
        <div class="c-banner__text">
            <p><strong>SAM Internet har öppnat.</strong> Nu är SAM Internet öppen och du kan använda tjänsten. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-banner__actionlink">SAM Internet</button>
                <a class="c-banner__actionlink" href="#banners">Stäng</a>
            </div>
        </div>
    </div>
</div>

<div class="c-banner c-banner--reversed" role="banner">
    <div class="c-banner__content">
        <div class="c-banner__text">
            <p> Vi använder cookies på jordbruksverket.se för att ge dig en bättre upplevelse av
                vår webbplats. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-btn--medium">Jag accepterar cookies</button>
                <a href="http://www.jordbruksverket.se" class="c-link__dark--icon-right">
                    Läs mer om cookies</a>
            </div>
        </div>
    </div>
</div>

<div class="c-banner c-banner--reversed c-banner--fixed banner-hidden" role="banner" id="c-banner--fixed">
    <div class="c-banner__content">
        <div class="c-banner__text">
            <p> Vi använder cookies på jordbruksverket.se för att ge dig en bättre upplevelse av
                vår webbplats. </p>
            <div class="c-banner__actionlink-container">
                <button class="c-btn--medium">Jag accepterar cookies</button>
                <a href="http://www.jordbruksverket.se" class="c-link__dark--icon-right">
                    Läs mer om cookies</a>
            </div>
        </div>
    </div>
</div>