Odyssey styleguide

Alert

Toggle example guides Toggle HTML markup

Alerts are used to provide a permanent message which sometimes can be removed by using the close icon. They are located below the header nav and right from the sidebar and only have three states: info, warning and error.

<insert-markup>components.alert-</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--warn
Warning alert
<insert-markup>components.alert-0</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--error
Error alert
<insert-markup>components.alert-1</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--info
Info alert
<insert-markup>components.alert-2</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--success
Succes alert
<insert-markup>components.alert-3</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
Markup 
<div class="odyssey-alert [modifier class] regular bold">
	<i class="odyssey-alert__icon"></i>
	You don't have enough credits left to look up this transaction, contact sales to increase your plan
	<i class="odyssey-alert__close"></i>
</div>
Source: src/components/alert.less, line 1