Stable3.5.1View in LexiconCHANGELOG
Colors
Lexicon adopts in its design system the following colors below:
Non-standard Colors
The colors below do not follow Lexicon standards but follow the idea of ​​satellite components, Clay provides non-standard colors to give you more flexibility to build UI that belong to the product.
Examples
Toast
This type of alert is specific for toast messages. These type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px, and the height can vary depending on the number of rows. It always has a close action.
<div class="alert alert-dismissible alert-danger" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong> This is an error message
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
...
</button>
</div>
<div class="alert alert-dismissible alert-info" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Info:</strong> This is an info message.
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
...
</button>
</div>
<div class="alert alert-dismissible alert-success" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Success:</strong> This is a success message
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
...
</button>
</div>
<div class="alert alert-dismissible alert-warning" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Warning:</strong> This is a warning message.
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
...
</button>
</div>
Embedded
Embedded alerts are meant for use in forms. Usually you will only need to use the information once. Its width depends on the width of the container it is placed in, always respecting the container margins to the content. The close action is not required for embedded alerts.
<div class="alert alert-danger" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong>This is an error message
</div>
<div class="alert alert-success" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong>This is a success message
</div>
<div class="alert alert-info" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong>This is an info message
</div>
<div class="alert alert-warning" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong>This is a warning message
</div>
Stripe
Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert usually appears on "Save" action, communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
<div class="alert alert-danger alert-dismissible alert-fluid" role="alert">
<div class="container">
<span class="alert-indicator">
...
</span>
<strong class="lead">Danger</strong> This is an error message
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</div>
<div class="alert alert-dismissible alert-fluid alert-success" role="alert">
<div class="container">
<span class="alert-indicator">
...
</span>
<strong class="lead">Success</strong> This is a success message
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</div>
<div class="alert alert-dismissible alert-fluid alert-info" role="alert">
<div class="container">
<span class="alert-indicator">
...
</span>
<strong class="lead">Info</strong> This is an info message
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</div>
<div class="alert alert-dismissible alert-fluid alert-warning" role="alert">
<div class="container">
<span class="alert-indicator">
...
</span>
<strong class="lead">Warning</strong> This is a warning message
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</div>
Non-standard Examples
These examples are not included in the Lexicon design system but they are built using foundations and Lexicon core components, these components may belong to the product or application.
Alert Lists
-
1 Files couldn't upload.
-
RTF
file-upload.RTF
Error: couldn't upload. -
JPG
file-name.JPG
Uploaded - 142.1KB -
RTF
ABC-file.RTF
Size: 156.6 MB34%
<ul class="alert-list">
<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
<div class="container-fluid">
<div
class="autofit-float autofit-padded autofit-row autofit-row-center"
>
<div class="autofit-col">
<div class="autofit-section">
<span class="alert-indicator">
...
</span>
<strong class="lead">1 Files</strong> couldn't upload.
</div>
</div>
<div class="autofit-col autofit-col-expand">
<div class="autofit-section">
<button class="btn btn-secondary btn-sm" type="button">
<span class="inline-item inline-item-before">
...
</span>
Retry all
</button>
</div>
</div>
</div>
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</li>
<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
<div class="container-fluid">
<div
class="autofit-float autofit-padded autofit-row autofit-row-center"
>
<div class="autofit-col">
<span class="sticker sticker-secondary">RTF</span>
</div>
<div class="autofit-col autofit-col-expand">
<div class="autofit-section">
<h4 class="component-title">
file-upload.RTF
</h4>
<span class="alert-indicator">
...
</span>
<strong class="lead">Error:</strong> couldn't upload.
</div>
</div>
<div class="autofit-col">
<button class="btn btn-secondary btn-sm" type="button">
<span class="inline-item inline-item-before">
...
</span>
Retry
</button>
</div>
</div>
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</li>
<li class="alert alert-light alert-dismissible alert-fluid">
<div class="container-fluid">
<div
class="autofit-float autofit-padded autofit-row autofit-row-center"
>
<div class="autofit-col">
<span class="sticker sticker-secondary">JPG</span>
</div>
<div class="autofit-col autofit-col-expand">
<div class="autofit-section">
<h4 class="component-title">file-name.JPG</h4>
<div class="component-subtitle">Uploaded - 142.1KB</div>
</div>
</div>
</div>
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</li>
<li class="alert alert-light alert-dismissible alert-fluid">
<div class="container-fluid">
<div
class="autofit-float autofit-padded autofit-row autofit-row-center"
>
<div class="autofit-col">
<span class="sticker sticker-secondary">RTF</span>
</div>
<div class="autofit-col autofit-col-expand">
<div class="autofit-section">
<h4 class="component-title">ABC-file.RTF</h4>
<div class="progress-group progress-group-stacked">
<div class="progress">
<div
aria-valuenow="34"
aria-valuemin="0"
aria-valuemax="100"
class="progress-bar"
role="progressbar"
style="width: 34%;"
></div>
</div>
<div class="autofit-row">
<div class="autofit-col autofit-col-expand">
<div class="component-subtitle">
Size: 156.6 MB
</div>
</div>
<div class="autofit-col">
<div class="component-subtitle">34%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button
aria-label="Close"
class="close"
data-dismiss="alert"
type="button"
>
...
</button>
</div>
</li>
</ul>
Additional Options
Mixed HTML Content
All alerts accept HTML as their content. You can use the following modifiers:
.lead
inside of an alert to make the beginning of your message stand out.alert-link
to style a link inside your alert
<div class="alert alert-warning" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Warning:</strong> This alert is a
<a href="#1" class="alert-link">warning message</a>.
</div>
Dismissible Alerts
<div class="alert alert-dismissible alert-success" role="alert">
<span class="alert-indicator">
...
</span>
<strong class="lead">Success:</strong> This is a success closeable alert
<button aria-label="Close" class="close" data-dismiss="alert" type="button">
...
</button>
</div>
Alert Notifications Absolute
An absolute positioned container for placing alerts on the top right corner relative to .alert-container
. Use this to create sticky positioned alerts with javascript, modifying the CSS property transform: translateY();
or margin-top
when scrollY
reaches a specific threshold. This component should generally be placed at the top of the page for sticky alerts aligned at the top.
<div class="alert-container container">
<div class="alert-notifications alert-notifications-absolute">
...
</div>
</div>
Fixed Notifications
A fixed positioned container for placing alerts on the top right corner of the page. This component can generally be placed anywhere on the page.
<div class="alert-notifications alert-notifications-fixed">
<div
class="alert alert-dismissible alert-info alert-notification"
role="alert"
>
...
</div>
</div>