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="662acd7020f46" data-uid="662acd7020f5b" aria-labelledby="notice__text__662acd7020f46">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="check" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7020fda">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7020f46" for="" class="c-notice__message">
Tellus Sem Lorem Malesuada Ipsum
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="662acd702101e" data-uid="662acd7021026" aria-labelledby="notice__text__662acd702101e">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="report" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd702105e">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd702101e" 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="662acd7021094" data-uid="662acd702109b" aria-labelledby="notice__text__662acd7021094">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="forum" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd70210cd">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7021094" for="" class="c-notice__message">
Sed posuere consectetur est at lobortis.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="662acd70210fe" data-uid="662acd7021105" aria-labelledby="notice__text__662acd70210fe">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="accessibility" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7021135">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd70210fe" 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'
]
])
@endnoticeIcon
Icon color red.
Icon size small
Without an icon.
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="662acd7021b23" data-uid="662acd7021b30" aria-labelledby="notice__text__662acd7021b23">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="check" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7021b75">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7021b23" for="" class="c-notice__message">
Icon color red.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="662acd7021bad" data-uid="662acd7021bb4" aria-labelledby="notice__text__662acd7021bad">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="apps" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7021be3">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7021bad" for="" class="c-notice__message">
Icon size small
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="662acd7021c13" data-uid="662acd7021c19" aria-labelledby="notice__text__662acd7021c13">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7021c13" 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.',
]
])
@endnoticeTitle
Lorem ipsum
Tellus Sem Lorem Malesuada Ipsum<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="662acd70223d4" data-uid="662acd70223dc" aria-labelledby="notice__text__662acd70223d4">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="check" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7022428">
</span>
</span>
<!-- notice__title -->
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-notice__title c-typography__variant--h4" data-uid="662acd7022489">
Lorem ipsum
</h2>
<!-- notice__text -->
<span id="notice__text__662acd70223d4" 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'
]
])
@endnoticeMessage size
This message size is set to sm.
This message size is set to md.
This message size is set to lg.
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="662acd7022b3f" data-uid="662acd7022b49" aria-labelledby="notice__text__662acd7022b3f">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="check" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7022b95">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7022b3f" for="" class="c-notice__message">
This message size is set to sm.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="662acd7022bcc" data-uid="662acd7022bd2" aria-labelledby="notice__text__662acd7022bcc">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="report" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7022c04">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7022bcc" for="" class="c-notice__message">
This message size is set to md.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="662acd7022c34" data-uid="662acd7022c3a" aria-labelledby="notice__text__662acd7022c34">
<!-- 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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="forum" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662acd7022c67">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662acd7022c34" for="" class="c-notice__message">
This message size is set to lg.
</span>
</div>@notice([
'type' => 'success',
'message' => [
'text' => 'This message size is set to sm.',
],
'icon' => [
'name' => 'check',
'size' => 'md',
'color' => 'white'
]
])
@endnotice
@notice([
'type' => 'info',
'message' => [
'text' => 'This message size is set to md.',
'size' => 'md'
],
'icon' => [
'name' => 'report',
'size' => 'md',
'color' => 'white'
]
])
@endnotice
@notice([
'type' => 'danger',
'message' => [
'text' => 'This message size is set to lg.',
'size' => 'lg'
],
'icon' => [
'name' => 'forum',
'size' => 'lg',
'color' => 'black'
]
])
@endnoticeBlade component parameters
| Key | Default value | Type | Available values | Description |
| type | info | string | - | Type of notice: success, warning, danger, info. |
| message | {"title":false,"text":false} | array | - | An array with two parameters: title and text |
| icon | false | boolean | - | The icon name as a string. |
| stretch | false | boolean | - | If true, the notice will stretch to the full width of the viewport. |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |