Notices
Get the users attention!
Type
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda646356" data-uid="6637eda646368" aria-labelledby="notice__text__6637eda646356">
<!-- 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="6637eda6463dc">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda646356" for="" class="c-notice__message">
Tellus Sem Lorem Malesuada Ipsum
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="6637eda64641c" data-uid="6637eda646423" aria-labelledby="notice__text__6637eda64641c">
<!-- 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="6637eda646461">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda64641c" 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="6637eda646496" data-uid="6637eda64649c" aria-labelledby="notice__text__6637eda646496">
<!-- 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="6637eda6464cc">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda646496" for="" class="c-notice__message">
Sed posuere consectetur est at lobortis.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="6637eda6464fb" data-uid="6637eda646501" aria-labelledby="notice__text__6637eda6464fb">
<!-- 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="6637eda64652e">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda6464fb" 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
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda6465f0" data-uid="6637eda6465f8" aria-labelledby="notice__text__6637eda6465f0">
<!-- 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="6637eda64662d">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda6465f0" for="" class="c-notice__message">
Icon color red.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda64665d" data-uid="6637eda646663" aria-labelledby="notice__text__6637eda64665d">
<!-- 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="6637eda646691">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda64665d" for="" class="c-notice__message">
Icon size small
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda6466bd" data-uid="6637eda6466c3" aria-labelledby="notice__text__6637eda6466bd">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda6466bd" 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
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda646756" data-uid="6637eda64675c" aria-labelledby="notice__text__6637eda646756">
<!-- 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="6637eda64678b">
</span>
</span>
<!-- notice__title -->
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-notice__title c-typography__variant--h4" data-uid="6637eda6467de">
Lorem ipsum
</h2>
<!-- notice__text -->
<span id="notice__text__6637eda646756" 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
Message size
<!-- notice.blade.php -->
<div class="c-notice c-notice--success" id="6637eda646897" data-uid="6637eda64689f" aria-labelledby="notice__text__6637eda646897">
<!-- 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="6637eda6468d2">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda646897" 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="6637eda646900" data-uid="6637eda646905" aria-labelledby="notice__text__6637eda646900">
<!-- 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="6637eda646930">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda646900" 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="6637eda64695a" data-uid="6637eda646960" aria-labelledby="notice__text__6637eda64695a">
<!-- 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="6637eda646989">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6637eda64695a" 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'
]
])
@endnotice
Blade 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. |