# Callout > A light panel with a 4px bar that sets a note or a status message apart from the copy. - Block class: `.hs-callout` - CSS: `components/callout.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: Note (neutral), Info, Success, Warning, Danger, On navy - HTML page: https://brand.honorsociety.org/components/callout/ ## What it is A note set apart from the copy. The title carries the meaning; the colour and the icon repeat it. Body text is ink on every surface. A callout stays light on any ground. ## When to use - A plain help note that is not a status, such as "We're always here to help" on a FAQ page (base `.hs-callout`). - A condition the reader must meet first, such as "Your certificate needs an active membership" (`--info`). - A confirmation after an action, such as a saved profile (`--success`). - A risk the reader must avoid, such as printing the ring size sheet at the wrong scale (`--warning`). - A form that failed: a danger callout at the top of the form, with one link per error to its field (`--danger`). ## When not to use - A short condition, source or "as of" line under content: use [Fine print](/components/fine-print/). - Legal or participation terms: use [Disclosure](/components/disclosure/). - A member testimonial: use [Quote](/components/quote/). - A list with nothing in it yet: use [Empty state](/components/empty-state/). ## Rules - Markup: `