Callout
Du använder callout när du vill tvinga fokus på en specifik del av statisk text eller bild.
Design och språk
När du ska använda callout
En Callout-komponent är som ett drop-quote eller ett blockquote. Det är ett sätt att tvinga fokus på en specifik del av statisk text eller bild. Dessa är mycket vanliga på jordbruksverket.se
Länk till annan webbplats, öppnas i nytt fönster.. De bör endast användas inom eller i slutet av textblock. De är inte meddelandekomponenter.
När du inte ska använda callout
Använd inte callout:
- som ett informationsmeddelande.
- för att visa status meddelande.
Byxfjärmat föl gick på duvshowen
<jv-callout type="notice" extra-class="" role-attr="banner">
<div class="l-flex-inline l-gap-090 l-align-middle">
<span class="sjv-i-info l-align-self-baseline"></span>
<h3 class="m-0">Byxfjärmat föl gick på duvshowen</h3>
</div>
</jv-callout>Varning
Byxfjärmat föl gick på duvshowen
<jv-callout type="warning" extra-class="" role-attr="banner">
<div class="l-flex-inline l-gap-090 l-align-middle">
<span class="sjv-i-varning l-align-self-baseline"></span>
<h3 class="m-0">Byxfjärmat föl gick på duvshowen</h3>
</div>
</jv-callout>Med text och knappar
Byxfjärmat föl gick på duvshowen
<jv-callout type="notice" extra-class="" role-attr="banner">
<div class="l-flex-inline l-gap-090 l-align-middle">
<span class="sjv-i-info l-align-self-baseline"></span>
<h3 class="m-0">Byxfjärmat föl gick på duvshowen</h3>
</div>
<div class="c-space-080"></div>
<p class="c-banner-p">Påverkades du av torkan i sommar? Då kan du ha rätt till stöd och ersättning.</p>
<div class="c-space-100"></div>
<div class="l-flex-inline l-gap-090">
<jv-button size="medium" type="primary" full-width="none"><button type="button" >Primär</button></jv-button>
<jv-button size="medium" full-width="none"><button type="button" >Standardknapp</button></jv-button>
</div>
</jv-callout>Senast publicerad
Sidansvarig för sidan är Styleguide