Callout

Jump To:

A container for content that highlights important information, provides context, or guides user attention within an interface

Demos

Basic Callout

A simple container to highlight content.

This is a default callout. It provides a subtle background to distinguish this section from the rest of the 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>

Status Callouts

Modifiers for different semantic states.

Info: Use this for helpful tips or additional context.

Success: Use this to confirm a positive action or state.

Warning: Use this to alert the user about potential issues.

Danger: Use this for critical errors or irreversible actions.

<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>

Outline Callout

A variant with no background color.

This is an outline callout. It uses a border without a background fill.

<div class="callout callout--outline">
  <p>This is an outline callout. It uses a border without a background fill.</p>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color" : rgb(240, 240, 240),
  "border-color" : "rule-light",
  "border-radius" :  6px,
  "border-width" : 1px,
  "box-shadow" : none,
  "caps-disabled" : false,
  "cap" : false,
  "cap-side" : "left",
  "cap-match-radius" : false,
  "cap-options" : (
    "color" : rgb(160, 160, 160),
    "size" : 0.5rem,
  ),
  "margin" : 2rem,
  "padding" : 1.5rem,
);

File Information

File: _callout.scss
Group: callout
Type: variable
Lines (comments): 22-35
Lines (code): 37-53

Map Properties

Name	Type	Default	Description
background-color	Color	rgb(240, 240, 240)	The background color of the Callout.
border-color	Color	"rule-light"	The border color of the Callout.
border-radius	Boolean	true	The border radius of the Callout.
border-width	Dimension	1px	The border width of the Callout.
box-shadow	CssValue	none	The box-shadow of the Callout.
caps-disabled	Boolean	false	If set will not output any cap styles for both base and styles
cap	Boolean	false	Toggles the use of caps on default callout
cap-side	Boolean	"left"	The side that gets the cap
cap-match-radius	Number	true	The cap should have be rounded to match the parent's border radius
cap-options	Map		The options for cap (see element.cap for options)
margin	Dimension	2rem	Bottom margin of the Callout.
padding	Dimension	1.5rem	Padding of the Callout.

$styles

Variable Type: Map

Styles Map (for unique variations/modifiers)

Adjust this with set-styles

$styles: (
  "outline" : (
    "background-color": transparent
  ),
  "info" : (
    "background-color" : "info-background",
  ),
  "warning" : (
    "background-color" : "warning-background",
  ),
  "success" : (
    "background-color" : "success-background",
  ),
  "danger" : (
    "background-color" : "danger-background",
  ),
);

File Information

File: _callout.scss
Group: callout
Type: variable
Lines (comments): 55-57
Lines (code): 59-75

Mixins

set()

Mixin

Change modules $config

File Information

File: _callout.scss
Group: callout
Type: mixin
Lines (comments): 77-80
Lines (code): 82-84

Examples

@include ulu.component-callout-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

set-styles()

Mixin

Set callout style variations

Styles that modify padding when using mix-match caps on/off should be included last

File Information

File: _callout.scss
Group: callout
Type: mixin
Lines (comments): 96-99
Lines (code): 101-103

Parameters

Name	Type	Description
$changes	`Map`	Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]
$merge-mode	`String`	Merge mode see utils.map-merge() [null

Require

$styles

styles()

Mixin

Output component stylesheet

File Information

File: _callout.scss
Group: callout
Type: mixin
Lines (comments): 105-107
Lines (code): 109-157

Examples

@include ulu.component-callout-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _callout.scss
Group: callout
Type: function
Lines (comments): 86-89
Lines (code): 91-94

Examples

@include ulu.component-callout-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config