Notices

Get the users attention!

Type


Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
check Tellus Sem Lorem Malesuada Ipsum

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
report 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.

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
forum Sed posuere consectetur est at lobortis.

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
accessibility Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

The type parameter is meant to be seen as sort of severity indicator. It's value either success, info, warning or danger.

<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="61efa73f638cf" class="c-notice c-notice--success" data-uid="61efa73f638c9" aria-labelledby="notice__text__61efa73f638cf">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f63c8b" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f63c85">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f638cf" for="" class="c-notice__message">
                    Tellus Sem Lorem Malesuada Ipsum
                
    </span>

</div>
<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="61efa73f63d1d" class="c-notice c-notice--info" data-uid="61efa73f63d1a" aria-labelledby="notice__text__61efa73f63d1d">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f63dcd" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f63dc6">
                    report
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f63d1d" 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>
<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="61efa73f63e60" class="c-notice c-notice--danger" data-uid="61efa73f63e49" aria-labelledby="notice__text__61efa73f63e60">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f63ee0" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f63edc">
                    forum
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f63e60" for="" class="c-notice__message">
                    Sed posuere consectetur est at lobortis.
                
    </span>

</div>
<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="61efa73f63f34" class="c-notice c-notice--warning" data-uid="61efa73f63f31" aria-labelledby="notice__text__61efa73f63f34">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f63fa5" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f63fa1">
                    accessibility
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f63f34" 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',
        'size' => 'sm'
    ],
    '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>',
        'size' => 'sm'
    ],
    'icon' => [
        'name' => 'report',
        'size' => 'md',
        'color' => 'white'
    ]
])
@endnotice

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

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

Icon


Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
check Icon color red.

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
apps Icon size small

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
Without an icon.

The icon parameter is an array that can configured just as the icon component. It could also be left out completely.

<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="61efa73f64306" class="c-notice c-notice--success" data-uid="61efa73f64302" aria-labelledby="notice__text__61efa73f64306">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f6437f" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f6437b">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f64306" for="" class="c-notice__message">
                    Icon color red.
                
    </span>

</div>
<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="61efa73f643ee" class="c-notice c-notice--success" data-uid="61efa73f643eb" aria-labelledby="notice__text__61efa73f643ee">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f6446f" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f6446b">
                    apps
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f643ee" for="" class="c-notice__message">
                    Icon size small
                
    </span>

</div>
<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="61efa73f644c4" class="c-notice c-notice--success" data-uid="61efa73f644c1" aria-labelledby="notice__text__61efa73f644c4">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f644c4" for="" class="c-notice__message">
                    Without an icon.
                
    </span>

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

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

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

Title


Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
check Tellus Sem Lorem Malesuada Ipsum

The title to show above the message

<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="61efa73f647c9" class="c-notice c-notice--success" data-uid="61efa73f647c5" aria-labelledby="notice__text__61efa73f647c9">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f64845" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f64841">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f647c9" for="" class="c-notice__message">
                    Tellus Sem Lorem Malesuada Ipsum
                
    </span>

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

Message size


Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
check This message size is set to sm.

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
report This message size is set to md.

Notice: Undefined variable: stretch in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php on line 18
forum This message size is set to lg.

The size of the message can be set to either sm, md or lg and will also affect the icon since our icon package is a font.

<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="61efa73f64bb6" class="c-notice c-notice--success" data-uid="61efa73f64bb2" aria-labelledby="notice__text__61efa73f64bb6">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f64c2a" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f64c26">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f64bb6" for="" class="c-notice__message">
                    This message size is set to sm.
                
    </span>

</div>
<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="61efa73f64c92" class="c-notice c-notice--info" data-uid="61efa73f64c8f" aria-labelledby="notice__text__61efa73f64c92">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f64d06" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f64d02">
                    report
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f64c92" for="" class="c-notice__message">
                    This message size is set to md.
                
    </span>

</div>
<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="61efa73f64d57" class="c-notice c-notice--danger" data-uid="61efa73f64d55" aria-labelledby="notice__text__61efa73f64d57">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="61efa73f64e14" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa73f64e0d">
                    forum
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__61efa73f64d57" 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.',
        'size' => '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,"message":""} array - An array with two parameters: title and text
icon false boolean - The icon name as a string.
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/Notice/notice.json