Meet Castos Sign In 14-Day Free Trial
Who we are
What we stand for️
Our Purpose
Our Vision
Our Mission
Our Values
Design System
Design Principles
Colors
Typography
Images
Content Guide
What is a Content Guide
Writing goals and principles
Tips for writing at Castos
Component Library
About our Components
Button
Logos & Assets
Castos
Castos Productions
Castos Academy
Audience Podcast
3 Clips Podcast
© Castos 2022 – v0.4
Alert
Alerts are used throughout the UI to provide system information about recent events.
Status
We need to combine the alert class with a status to get the full alert component and it should be accompanied by its corresponding icon.
Info
Used for informative feedback or to provide context.
<div class="alert alert--info">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.54839C17.7097 1.54839 22.4516 6.24194 22.4516 12C22.4516 17.8065 17.7581 22.4516 12 22.4516C6.19355 22.4516 1.54839 17.8065 1.54839 12C1.54839 6.24194 6.19355 1.54839 12 1.54839ZM12 0C5.37097 0 0 5.41935 0 12C0 18.629 5.37097 24 12 24C18.5806 24 24 18.629 24 12C24 5.41935 18.5806 0 12 0ZM10.2581 16.6452C9.91936 16.6452 9.67742 16.9355 9.67742 17.2258V17.6129C9.67742 17.9516 9.91936 18.1935 10.2581 18.1935H13.7419C14.0323 18.1935 14.3226 17.9516 14.3226 17.6129V17.2258C14.3226 16.9355 14.0323 16.6452 13.7419 16.6452H13.1613V9.87097C13.1613 9.58065 12.871 9.29032 12.5806 9.29032H10.2581C9.91936 9.29032 9.67742 9.58065 9.67742 9.87097V10.2581C9.67742 10.5968 9.91936 10.8387 10.2581 10.8387H10.8387V16.6452H10.2581ZM12 5.03226C11.129 5.03226 10.4516 5.75806 10.4516 6.58065C10.4516 7.45161 11.129 8.12903 12 8.12903C12.8226 8.12903 13.5484 7.45161 13.5484 6.58065C13.5484 5.75806 12.8226 5.03226 12 5.03226Z" fill="#256AEB"/>
</svg>
<p>Info message.</p>
</div>Warning
Used to warn about an issue that requires attention.
<div class="alert alert--warn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.54839C17.7097 1.54839 22.4516 6.24194 22.4516 12C22.4516 17.8065 17.7581 22.4516 12 22.4516C6.19355 22.4516 1.54839 17.8065 1.54839 12C1.54839 6.24194 6.19355 1.54839 12 1.54839ZM12 0C5.37097 0 0 5.41935 0 12C0 18.629 5.37097 24 12 24C18.5806 24 24 18.629 24 12C24 5.41935 18.5806 0 12 0ZM11.4194 5.80645C11.0806 5.80645 10.8387 6.09677 10.8387 6.43548L11.1774 14.5645C11.1774 14.8548 11.4677 15.0968 11.7581 15.0968H12.1935C12.4839 15.0968 12.7742 14.8548 12.7742 14.5645L13.1129 6.43548C13.1129 6.09677 12.871 5.80645 12.5323 5.80645H11.4194ZM12 16.0645C11.2258 16.0645 10.6452 16.6935 10.6452 17.4194C10.6452 18.1935 11.2258 18.7742 12 18.7742C12.7258 18.7742 13.3548 18.1935 13.3548 17.4194C13.3548 16.6935 12.7258 16.0645 12 16.0645Z" fill="#E9A106"/>
</svg>
<p>Warning message.</p>
</div>Success
Used when an action is successfully completed.
<div class="alert alert--success">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0C5.37097 0 0 5.41935 0 12C0 18.629 5.37097 24 12 24C18.5806 24 24 18.629 24 12C24 5.41935 18.5806 0 12 0ZM12 22.4516C6.24194 22.4516 1.54839 17.8065 1.54839 12C1.54839 6.29032 6.19355 1.54839 12 1.54839C17.7097 1.54839 22.4516 6.24194 22.4516 12C22.4516 17.7581 17.7581 22.4516 12 22.4516ZM18.8226 9.19355C19.0645 8.95161 19.0645 8.56452 18.8226 8.37097L18.4355 7.93548C18.1935 7.69355 17.8065 7.69355 17.6129 7.93548L9.67742 15.7742L6.33871 12.4355C6.14516 12.1935 5.75806 12.1935 5.51613 12.4355L5.12903 12.8226C4.8871 13.0645 4.8871 13.4032 5.12903 13.6452L9.29032 17.8548C9.48387 18.0484 9.87097 18.0484 10.1129 17.8548L18.8226 9.19355Z" fill="#04AC21"/>
</svg>
<p>Success message.</p>
</div>Danger
Used to indicate that there was a problem.
<div class="alert alert--danger">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.54839C17.7097 1.54839 22.4516 6.24194 22.4516 12C22.4516 17.8065 17.7581 22.4516 12 22.4516C6.19355 22.4516 1.54839 17.8065 1.54839 12C1.54839 6.24194 6.19355 1.54839 12 1.54839ZM12 0C5.37097 0 0 5.41935 0 12C0 18.629 5.37097 24 12 24C18.5806 24 24 18.629 24 12C24 5.41935 18.5806 0 12 0ZM11.4194 5.80645C11.0806 5.80645 10.8387 6.09677 10.8387 6.43548L11.1774 14.5645C11.1774 14.8548 11.4677 15.0968 11.7581 15.0968H12.1935C12.4839 15.0968 12.7742 14.8548 12.7742 14.5645L13.1129 6.43548C13.1129 6.09677 12.871 5.80645 12.5323 5.80645H11.4194ZM12 16.0645C11.2258 16.0645 10.6452 16.6935 10.6452 17.4194C10.6452 18.1935 11.2258 18.7742 12 18.7742C12.7258 18.7742 13.3548 18.1935 13.3548 17.4194C13.3548 16.6935 12.7258 16.0645 12 16.0645Z" fill="#E11966"/>
</svg>
<p>Error message.</p>
</div>