Notification

Basic Card component


Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
warning This is a warning

Card is based on a paper component

The plain basic card contain title, byline and content

<button id="61efb3c16ec902.45727162" class="c-button notification__button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efb3c16ecaa">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Get notification
            </span>
        
                    
            
    </span>
</button>

<!-- typography.blade.php -->
<div id="61efb3c16ef72" class="c-notification c-notification__spawn--bottom-left u-display--none" autoHideDuration="10000" maxAmount="3" direction="bottom-left" data-uid="61efb3c16ef6c">
    <br />
<b>Notice</b>:  Undefined variable: stretch in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php</b> on line <b>18</b><br />
<!-- notice.blade.php -->
<div id="61efb3c16f223" class="c-notice c-notice--danger" data-uid="61efb3c16f21f" aria-labelledby="notice__text__61efb3c16f223">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efb3c16f2d2" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb3c16f2cd">
                    warning
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efb3c16f223" for="" 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notification/notification.json