EvoToolkit - v3.7.2 (Changelog)

Alert Box

Stateful modifiers for the standard box component which are used here to create alert boxes. This abstraction has been seperated into its own page to allow for more in-depth to show more examples.

Source

Contributors

Luke Harrison

Base

General

General Alert

I'm a general purpose alert box used to communicate any information relevant to the current view. (Example Link)

I'm a general purpose alert box used to communicate any information relevant to the current view. (Example Link)

<div class="c-box c-box--rounded c-box--border is-info u-mb-regular">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-regular o-icon-large@md"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#info"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<h1 class="c-type-foxtrot">General Alert</h1>
				<p>I'm a general purpose alert box used to communicate any information relevant to the current view. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

<div class="c-box c-box--rounded c-box--border is-info">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-tiny">
				<svg class="o-icon-small"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#info"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-tiny u-pr-tiny">
				<p>I'm a general purpose alert box used to communicate any information relevant to the current view. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

Positive

Positive Alert

I'm a positive alert used to communicate good information to the user, like a success message. (Example Link)

I'm a positive alert used to communicate good information to the user, like a success message. (Example Link)

<div class="c-box c-box--rounded c-box--border is-positive u-mb-regular">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-regular o-icon-large@md"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<h1 class="c-type-foxtrot">Positive Alert</h1>
				<p>I'm a positive alert used to communicate good information to the user, like a success message. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

<div class="c-box c-box--rounded c-box--border is-positive">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-tiny">
				<svg class="o-icon-small"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-tiny u-pr-tiny">
				<p>I'm a positive alert used to communicate good information to the user, like a success message. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

Caution

Caution Alert

I'm a caution alert used to communicate information which is somewhere between good and bad. (Example Link)

I'm a caution alert used to communicate information which is somewhere between good and bad. (Example Link)

<div class="c-box c-box--rounded c-box--border is-caution u-mb-regular">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-regular o-icon-large@md"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#caution"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<h1 class="c-type-foxtrot">Caution Alert</h1>
				<p>I'm a caution alert used to communicate information which is somewhere between good and bad. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

<div class="c-box c-box--rounded c-box--border is-caution">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-tiny">
				<svg class="o-icon-small"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#caution"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-tiny u-pr-tiny">
				<p>I'm a caution alert used to communicate information which is somewhere between good and bad. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

Negative

Negative Alert

I'm a negative alert used to communicate bad information which has an impact on what the user is trying to do. (Example Link)

I'm a negative alert used to communicate bad information which has an impact on what the user is trying to do. (Example Link)

<div class="c-box c-box--rounded c-box--border is-negative u-mb-regular">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-regular o-icon-large@md"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#stop"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<h1 class="c-type-foxtrot">Negative Alert</h1>
				<p>I'm a negative alert used to communicate bad information which has an impact on what the user is trying to do. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

<div class="c-box c-box--rounded c-box--border is-negative">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-tiny">
				<svg class="o-icon-small"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#stop"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-tiny u-pr-tiny">
				<p>I'm a negative alert used to communicate bad information which has an impact on what the user is trying to do. <a href="/" class="c-type-link">(Example Link)</a></p>
			</div>
		</div>
	</div>
</div>

Dismissable

Using the expander object, we can make the alert box dismissable. For details on how to programatically trigger this behaviour, see the expander's methods section.

There was a problem submitting your request.

Network Downtime Incoming

Between 23:30 and 01:30 there will be significant network downtime whilst are systems are updated and descaled. We apologize for any inconvenience caused.

<div class="c-box c-box--rounded c-box--border is-negative o-expander is-active u-mb-regular">
	<div class="o-layout o-layout--fit o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-small"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#stop"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-width-grow u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<p><strong>There was a problem submitting your request.</strong></p>
			</div>
		</div>
	</div>
	<button class="u-p-micro u-p-small@sm2 o-icon-tiny c-box__close">
		<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
	</button>
</div>

<div class="c-box c-box--rounded c-box--border is-caution c-box--hide-overflow o-expander is-active">
	<div class="o-layout o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-shrink u-flex-center">
			<div class="o-box u-p-small">
				<svg class="o-icon-regular o-icon-large@md"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#caution"></use></svg>
			</div>
		</div>
		<div class="o-layout__item u-flex-middle">
			<div class="o-box u-pv-micro u-pr-micro u-pv-small@sm2 u-pr-small@sm2">
				<h1 class="c-type-foxtrot">Network Downtime Incoming</h1>
				<p>Between <em>23:30</em> and <em>01:30</em> there will be significant network downtime whilst are systems are updated and descaled. We apologize for any inconvenience caused.</p>
			</div>
		</div>
		<div class="o-layout__item u-width-full u-theme-caution">
			<div class="o-box u-p-micro u-p-small@sm2 u-align-center">
				<button class="c-button c-button--invert u-text-caution u-mr-small">More Information</button>
				<button class="c-button c-button--secondary c-button--invert">Get in Touch</button>
			</div>
		</div>
	</div>
	<button class="u-p-micro u-p-small@sm2 o-icon-tiny c-box__close">
		<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
	</button>
</div>