@ulu/frontend/lib/scss/components/_callout.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Basic Callout
  description: A simple container to highlight content.
-->
<div class="callout">
  <p>This is a default callout. It provides a subtle background to distinguish this section from the rest of the content.</p>
</div>

<!-- @ulu-demo
  title: Status Callouts
  description: Modifiers for different semantic states.
-->
<div class="callout callout--info">
  <p><strong>Info:</strong> Use this for helpful tips or additional context.</p>
</div>
<div class="callout callout--success">
  <p><strong>Success:</strong> Use this to confirm a positive action or state.</p>
</div>
<div class="callout callout--warning">
  <p><strong>Warning:</strong> Use this to alert the user about potential issues.</p>
</div>
<div class="callout callout--danger">
  <p><strong>Danger:</strong> Use this for critical errors or irreversible actions.</p>
</div>

<!-- @ulu-demo
  title: Outline Callout
  description: A variant with no background color.
-->
<div class="callout callout--outline">
  <p>This is an outline callout. It uses a border without a background fill.</p>
</div>