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.

Komponent och kod

Komponenten driftsattes första gången i version 22.0.71.

Notis

Byxfjärmat föl gick på duvshowen

HTML
<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

HTML
<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

Påverkades du av torkan i sommar? Då kan du ha rätt till stöd och ersättning.

HTML
<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