Callouts

Highlighted information boxes with color variants for drawing attention to important content.

Basic Callout

Standard callout with default styling.

Did you know?

Focus UI is built with modern CSS features and works great with all modern browsers.

HTML

<div class="focus-callout">
  <h5><i class="fa fa-lightbulb"></i> Did you know?</h5>
  <p>Focus UI is built with modern CSS features and works great with all modern browsers.</p>
</div>

Color Variants

Callouts come in multiple color variants to convey different meanings.

Primary Callout

Use primary callouts for general highlighted information.

Secondary Callout

Secondary callouts for less prominent information.

Info Callout

Perfect for informational messages and tips.

Success Callout

Use this to highlight successful operations or positive outcomes.

Warning Callout

Important warnings that users should pay attention to.

Danger Callout

Critical information or errors that need immediate attention.

HTML

<div class="focus-callout focus-callout-primary">
  <h5><i class="fa fa-star"></i> Primary Callout</h5>
  <p>Use primary callouts for general highlighted information.</p>
</div>

<div class="focus-callout focus-callout-info">
  <h5><i class="fa fa-info-circle"></i> Info Callout</h5>
  <p>Perfect for informational messages and tips.</p>
</div>

<div class="focus-callout focus-callout-success">...</div>
<div class="focus-callout focus-callout-warning">...</div>
<div class="focus-callout focus-callout-danger">...</div>

Callouts with Links

Callouts automatically style links inside them.

Ready to get started?

Check out the Getting Started guide to learn how to include Focus UI in your project. It's as simple as adding a CSS file!

HTML

<div class="focus-callout focus-callout-info">
  <h5><i class="fa fa-rocket"></i> Ready to get started?</h5>
  <p>
    Check out the <a href="getting-started.html">Getting Started</a> guide to learn how to
    include Focus UI in your project.
  </p>
</div>

CSS Classes Reference

Class	Description
`.focus-callout`	Base callout component
`.focus-callout-primary`	Primary blue variant
`.focus-callout-secondary`	Secondary gray variant
`.focus-callout-info`	Info blue variant
`.focus-callout-success`	Success green variant
`.focus-callout-warning`	Warning yellow variant
`.focus-callout-danger`	Danger red variant