<!-- Default -->
<div class="vgr-important-message">
    <a class="vgr-important-message__link" href="#">Exempeltext - Kris och katastrof</a>
</div>

<!-- Crisis Message -->
<div class="vgr-important-message vgr-important-message--yellow">
    <a class="vgr-important-message__link" href="#">Exempeltext - Viktig info</a>
</div>

<div class="vgr-important-message{% if modifier %} vgr-important-message--{{modifier}}{% endif %}">
  	<a class="vgr-important-message__link" href="{{link}}">{{ text }}</a>
</div>
/* Default */
{
  "text": "Exempeltext - Kris och katastrof",
  "link": "#"
}

/* Crisis Message */
{
  "text": "Exempeltext - Viktig info",
  "link": "#",
  "modifier": "yellow"
}

  • Content:
    .vgr-important-message {
      font-family: $secondary-font-stack;
      font-size: $large-font-size;
      background-color: #e4002b;
      color: #fff;
    
      &:hover {
        background-color: lighten(#e4002b, 4);
      }
    
      &__link {
        display: block;
        padding: $default-whitespace;
        text-align: center;
        color: inherit;
    
        &:hover {
          color: inherit;
          text-decoration: none;
        }
      }
    
      &--yellow {
        background-color: #ffcd00;
        color: #045b94;
    
        &:hover {
          background-color: lighten(#ffcd00, 4);
        }
      }
    }
    
  • URL: /components/raw/important-message/_important-message.scss
  • Filesystem Path: components/components/important-message/_important-message.scss
  • Size: 523 Bytes

Viktigt Meddelande / Important Message

Ska placeras direkt under huvudmeny i header vid tillfällen för krisinformation/information som behöver meddelas allmänheten.

Default-/standardvariant har röd bottenplatta och används vid viktig krisinformation medan variant med gul bottenplatta används vid information utan krisstatus.

Se exempel på användning i designskisser nedan.

Externa beroenden:

SCSS-variabler

$secondary-font-stack: Helvetica, Arial, sans-serif !default;
$large-font-size: 18px !default;
$default-whitespace: 15px !default;

Se SCSS-kod under fliken “Assets” i menyn ovan

HTML

N/A

JAVASCRIPT

N/A

ÖVRIGT

N/A

Designreferenser:

Gul bottenplatta används vid viktig information.

Röd bottenplatta används vid krisinformation.

Kompilerad CSS:

    .vgr-important-message {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 1.125rem;
        background-color: #e4002b;
        color: #fff;
    }
    .vgr-important-message:hover {
        background-color: #f8002f;
    }
    .vgr-important-message__link {
        display: block;
        padding: 15px;
        text-align: center;
        color: inherit;
    }
    .vgr-important-message__link:hover {
        color: inherit;
        text-decoration: none;
    }
    .vgr-important-message--yellow {
        background-color: #ffcd00;
        color: #045b94;
    }
    .vgr-important-message--yellow:hover {
        background-color: #ffd114;
    }
  

Utvecklingslogg:

2018-02-23

  • Kvalitetsgranskning av komponent och dokumentation

2018-02-22

  • Komponent implementerad i stilguiden

2018-02-12

  • Designleverans