Notification
Basic Card component
Card is based on a paper component
Warning: The parameter "name" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 253
<button class="c-button notification__button c-button__filled c-button__filled--primary c-button--md" target="_top" aria-label="Get notification" data-uid="68b86c694529c">
<span class="c-button__label">
<span class="c-button__label-text ">
Get notification
</span>
</span> </button>
<!-- typography.blade.php -->
<div class="c-notification c-notification__spawn--bottom-left u-display--none" autoHideDuration="10000" maxAmount="3" direction="bottom-left" data-uid="68b86c694531e">
<!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_68b86c6945377" data-uid="68b86c6945387" aria-labelledby="notice__text__id_68b86c6945377">
<span class="c-notice__icon">
<br />
<b>Warning</b>: The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- icon.blade.php -->
<span class="c-icon c-icon--warning c-icon--material c-icon--material-warning material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-white c-icon--size-md" data-material-symbol="warning" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86c694550b">
</span>
</span>
<span id="notice__text__id_68b86c6945377" data-js-notice-message="true" class="c-notice__message">
This is a warning
</span>
</div></div>
@button(['type' => 'filled', 'text' => 'Get notification', 'color' => 'primary', 'classList' => ['notification__button']])
@endbutton
@notification(
[
'type' => 'danger',
'message' => ['text' => 'This is a warning', 'size' => 'md'],
'icon' => ['name' => 'warning', 'size' => 'md', 'color' => 'white'],
'animation' => ['onPageLoad' => false, 'direction' => 'bottom-left'],
'autoHideDuration' => '10000',
'maxAmount' => '3'
]
)
@endnotification
Blade component parameters
Key | Default value | Type | Available values | Description |
element | div | string | - | What element the markup will use. |
slot | string | - | The content | |
message | [] | array | - | - |
type | NULL | - | - | |
icon | [] | array | - | - |
animation | {"onPageLoad":false,"direction":null} | array | - | - |
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. |