notice
The most basic imlementation of the notice component consists of the notice
container element wrapping text content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.
<div class="notice">
...
</div>
notice__title
Add a title to your notice using the notice__title
element.
Notice title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.
<div class="notice">
<h2 class="notice__title">...</h2>
<p>...</p>
</div>
notice + media
For cases where a notice message should be displayed alongside an icon or image, try combining it with the media component.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.
<div class="notice">
<div class="media media_gap_sm">
<div class="media__obj">
...
</div>
<div class="media__body">
...
</div>
</div>
</div>
notice + icon-action
When a notice needs to be dismissable, try adding the icon-action component along with some flex utilities.
Hello, world!
Lorem ipsum dolor sit amet, consectetur adip iscing elit. Vivamus libero est, fermen.
<div class="notice">
<div class="flex flex-justify-between">
<p>...</p>
<button class="icon-action">
<svg class="icon" role="img">...</svg>
</button>
</div>
</div>
Dismissable JavaScript behavior is not provided.
notice_type_[key]
A type modifier that changes the visual context of a notice.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.
<div class="notice notice_type_info">...</div>
<div class="notice notice_type_success">...</div>
<div class="notice notice_type_caution">...</div>
<div class="notice notice_type_danger">...</div>
Sass Variables
Variable | Default | Description |
---|---|---|
$prefix-block | null | String to prefix blocks with. |
$prefix-element | "__" | String to prefix elements with. |
$prefix-modifier | "_" | String to prefix modifiers with. |
$prefix-modifier-value | "_" | String to prefix modifier values with. |
$gap | 0.5em | The default gap spacing for the notice component. |
$padding | 1em | Sets the padding property of the notice. |
$border | null | Sets the border property of the notice. |
$border-radius | core.$border-radius | Sets the border-radius property of the notice. |
$background | core.$shade | Sets the background property of the notice. |
$box-shadow | null | Sets the box-shadow property of the notice. |
$title-font-size | core.$font-size-lg | Sets the font-size property of the notice__title element. |
$title-line-height | core.$line-height-lg | Sets the line-height property of the notice__title element. |
$title-font-weight | core.font-weight("semi-bold") | Sets the font-weight property of the notice__title element. |