Note

A note is a full width simple banner.
Can be used to highlight a message.

Note

Component status: WIP

A note is a full width simple banner.
Can be used to highlight a message.

Default

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

Modifiers

.note--small

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

Small text

.note--collapse

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

No margin

.note--center

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

Text centered on mobile

.note--left

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

Text left aligned on desktop

.note--tall

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

More vertical padding

.note--inverted

OBS: Short text.

OBS: Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.

OBS: This note is having a link.

OBS: All this text is a link.

Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.

Inverts the order of the content

<div class="note  c--botticelli">
    <span>
        <b>OBS:</b> Short text.
    </span>
</div>

<div class="note  c--casper">
    <span>
        <b>OBS:</b> Long text. He left a note to say he would be home late. There's a note on the door saying when the shop will open again. A short explanation or an extra piece of information that is given at the bottom of a page, at the back of a book, etc.
    </span>
</div>

<div class="note  c--sisal">
    <span>
        <b>OBS:</b> This note is having a <a href="#">link</a>.
    </span>
</div>

<div class="note  c--dull-orange">
    <a href="#"><b>OBS:</b> All this text is a link.</a>
</div>

<div class="note  c--dark-green-cyan">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="-255 347 100 100" enable-background="new -255 347 100 100" xml:space="preserve">
        <g id="Layer_1_1_">
            <path fill="#ffffff" d="M-165.2,381.3c-2.7-2.1-6.6-1.5-8.7,1.2l-25.6,34.1l-7.8-10.6c-2-2.7-5.9-3.4-8.7-1.3
                c-2.8,2-3.4,5.9-1.4,8.7l12.8,17.4c1.2,1.6,3,2.5,4.9,2.5c2,0,3.8-0.9,5-2.4l30.6-40.8C-161.9,387.3-162.4,383.4-165.2,381.3z"/>
            <path fill="#ffffff" d="M-220.3,400.2c5.4-4,12.8-2.8,16.8,2.5l5.1,6.8v-14.3c0-1.6-1.3-2.9-2.9-2.9h-2.9v-12.4
                c0-10.8-8.8-19.6-19.6-19.6c-10.8,0-19.6,8.8-19.6,19.6v12.4h-2.9c-1.6,0-2.9,1.3-2.9,2.9v29.3c0,1.6,1.3,2.9,2.9,2.9h31.2
                l-7.7-10.4C-226.8,411.7-225.7,404.1-220.3,400.2z M-234.1,380.5c0-5.7,4.6-10.4,10.4-10.4c5.7,0,10.4,4.6,10.4,10.4v11.8h-20.7
                V380.5z"/>
        </g>
    </svg>
    <p>Du har intastet en leveringadresse til en ikke-brofast ø, Vi leverer dæsværre ikke store møbler til denne adresse. Vælg venligst en anden leveringsadresse.</p>
</div>

Se mere