Notices

Get the users attention!

Type

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

check Tellus Sem Lorem Malesuada Ipsum
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.
forum Sed posuere consectetur est at lobortis.
accessibility Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.
<!-- notice.blade.php -->
<div id="62beca71e208a" class="c-notice c-notice--success" data-uid="62beca71e2080" aria-labelledby="notice__text__62beca71e208a">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e23f6" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e23ee">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e208a" for="" class="c-notice__message">
                    Tellus Sem Lorem Malesuada Ipsum
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e2470" class="c-notice c-notice--info" data-uid="62beca71e246b" aria-labelledby="notice__text__62beca71e2470">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e24fa" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e24f6">
                    report
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e2470" 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 id="62beca71e2542" class="c-notice c-notice--danger" data-uid="62beca71e2540" aria-labelledby="notice__text__62beca71e2542">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e25b3" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e25af">
                    forum
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e2542" for="" class="c-notice__message">
                    Sed posuere consectetur est at lobortis.
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e25fa" class="c-notice c-notice--warning" data-uid="62beca71e25f7" aria-labelledby="notice__text__62beca71e25fa">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e2660" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e265d">
                    accessibility
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e25fa" 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

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

check Icon color red.
apps Icon size small
Without an icon.
<!-- notice.blade.php -->
<div id="62beca71e2904" class="c-notice c-notice--success" data-uid="62beca71e2900" aria-labelledby="notice__text__62beca71e2904">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e296c" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e2968">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e2904" for="" class="c-notice__message">
                    Icon color red.
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e29a7" class="c-notice c-notice--success" data-uid="62beca71e29a4" aria-labelledby="notice__text__62beca71e29a7">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e2a46" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e2a40">
                    apps
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e29a7" for="" class="c-notice__message">
                    Icon size small
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e2a9a" class="c-notice c-notice--success" data-uid="62beca71e2a98" aria-labelledby="notice__text__62beca71e2a9a">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e2a9a" 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

The title to show above the message

check Tellus Sem Lorem Malesuada Ipsum
<!-- notice.blade.php -->
<div id="62beca71e2dba" class="c-notice c-notice--success" data-uid="62beca71e2db6" aria-labelledby="notice__text__62beca71e2dba">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e2e1e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e2e1a">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e2dba" 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

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.

check This message size is set to sm.
report This message size is set to md.
forum This message size is set to lg.
<!-- notice.blade.php -->
<div id="62beca71e30e1" class="c-notice c-notice--success" data-uid="62beca71e30de" aria-labelledby="notice__text__62beca71e30e1">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e3144" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e3141">
                    check
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e30e1" for="" class="c-notice__message">
                    This message size is set to sm.
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e3180" class="c-notice c-notice--info" data-uid="62beca71e317e" aria-labelledby="notice__text__62beca71e3180">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e31fe" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e31fa">
                    report
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e3180" for="" class="c-notice__message">
                    This message size is set to md.
                
    </span>

</div>
<!-- notice.blade.php -->
<div id="62beca71e3237" class="c-notice c-notice--danger" data-uid="62beca71e3234" aria-labelledby="notice__text__62beca71e3237">
    
    <!-- notice__ico -->
            <span class="c-notice__icon">
            <!-- icon.blade.php -->
    <i id="62beca71e328e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62beca71e328b">
                    forum
            </i>
        </span>
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62beca71e3237" 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.
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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/notice.json