Notices

Get the users attention!

Type

Tellus Sem Lorem Malesuada Ipsum

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. A link to something.

Sed posuere consectetur est at lobortis.

Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="684e55fbafb42" data-uid="684e55fbafb56" aria-labelledby="notice__text__684e55fbafb42">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbafcad">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbafb42" for="" class="c-notice__message">
                    Tellus Sem Lorem Malesuada Ipsum
                
    </span>

</div>
    <!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="684e55fbafd08" data-uid="684e55fbafd10" aria-labelledby="notice__text__684e55fbafd08">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--report c-icon--material c-icon--material-report material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="report" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbafd4c">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbafd08" for="" class="c-notice__message">
                    Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <a href="#">A link to something.</a>
                
    </span>

</div>
    <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="684e55fbafd8a" data-uid="684e55fbafd91" aria-labelledby="notice__text__684e55fbafd8a">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--forum c-icon--material c-icon--material-forum material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="forum" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbafdc6">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbafd8a" for="" class="c-notice__message">
                    Sed posuere consectetur est at lobortis.
                
    </span>

</div>
    <!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="684e55fbafdff" data-uid="684e55fbafe06" aria-labelledby="notice__text__684e55fbafdff">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--accessibility c-icon--material c-icon--material-accessibility material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="accessibility" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbafe3a">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbafdff" for="" class="c-notice__message">
                    Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.
                
    </span>

</div>

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Tellus Sem Lorem Malesuada Ipsum',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'white'
    ]
])
@endnotice

@notice([
    'type' => 'info',
    'message' => [
        'text' => 'Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <a href="#">A link to something.</a>',
    ],
    'icon' => [
        'name' => 'report',
        'size' => 'md',
        'color' => 'white'
    ]
])
@endnotice

@notice([
    'type' => 'danger',
    'message' => [
        'text' => 'Sed posuere consectetur est at lobortis.',
    ],
    'icon' => [
        'name' => 'forum',
        'size' => 'md',
        'color' => 'black'
    ]
])
@endnotice

@notice([
    'type' => 'warning',
    'message' => [
        'text' => 'Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.',
    ],
    'icon' => [
        'name' => 'accessibility',
        'size' => 'md',
        'color' => 'black'
    ]
])
@endnotice

Icon

Icon color red.

Icon size small

Without an icon.

<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="684e55fbafebc" data-uid="684e55fbafec4" aria-labelledby="notice__text__684e55fbafebc">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbafefe">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbafebc" for="" class="c-notice__message">
                    Icon color red.
                
    </span>

</div>
    <!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="684e55fbaff37" data-uid="684e55fbaff3d" aria-labelledby="notice__text__684e55fbaff37">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbaff74">
                    </span>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbaff37" for="" class="c-notice__message">
                    Icon size small
                
    </span>

</div>
    <!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="684e55fbaffad" data-uid="684e55fbaffb4" aria-labelledby="notice__text__684e55fbaffad">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__684e55fbaffad" for="" class="c-notice__message">
                    Without an icon.
                
    </span>

</div>

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Icon color red.',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'primary'
    ]
])
@endnotice

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Icon size small',
    ],
    'icon' => [
        'name' => 'apps',
        'size' => 'md',
        'color' => 'white',
        'size' => 'sm'
    ]
])
@endnotice

@notice([
    'type' => 'success',
    'message' => [
        'text' => 'Without an icon.',
    ]
])
@endnotice

Title

Lorem ipsum

Tellus Sem Lorem Malesuada Ipsum

<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="684e55fbb001c" data-uid="684e55fbb0023" aria-labelledby="notice__text__684e55fbb001c">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="684e55fbb005a">
                    </span>
        </span>
        
    <!-- notice__title -->
                <!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-notice__title c-typography__variant--h4" data-uid="684e55fbb00d1">
    Lorem ipsum
</h2>    
    <!-- notice__text -->
    <span id="notice__text__684e55fbb001c" for="" class="c-notice__message">
                    Tellus Sem Lorem Malesuada Ipsum
                
    </span>

</div>

@notice([
    'type' => 'success',
    'message' => [
        'title' => 'Lorem ipsum',
        'text' => 'Tellus Sem Lorem Malesuada Ipsum',
    ],
    'icon' => [
        'name' => 'check',
        'size' => 'md',
        'color' => 'white'
        ]
    ])
@endnotice

Actions & dismiss

Warning: The parameter "action" is not recognized in the component "notice" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 244

Warning: The parameter "dismissable" is not recognized in the component "notice" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 244

This message has an action button and may be dismissed (Type: info, Timeout: immediate, Iteration: 1).

Warning: The parameter "dismissable" is not recognized in the component "notice" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 244

This message may be dismissed (Type: info, Timeout: immediate, Iteration: 1).