Callout

Callout(
  _.slots.icon(Icon(_.name := "circle-info")())
)(
  "This is a standard callout. You can customize its content and even the icon."
)

Callout(  _.slots.icon(Icon(_.name := "circle-info")()))(  "This is a standard callout. You can customize its content and even the icon.")

Examples

Variants

Set the variant attribute to change the callout's variant.

Callout(
  _.variant.brand,
  _.slots.icon(Icon(_.name := "circle-info")())
)(
  strong("This is super informative"),
  br(),
  "You can tell by how pretty the callout is."
)
Callout(
  _.variant.success,
  _.slots.icon(Icon(_.name := "circle-check")())
)(
  strong("Your changes have been saved"),
  br(),
  "You can safely exit the app now."
)
Callout(
  _.variant.neutral,
  _.slots.icon(Icon(_.name := "gear")())
)(
  strong("Your settings have been updated"),
  br(),
  "Settings will take effect on next login."
)
Callout(
  _.variant.warning,
  _.slots.icon(Icon(_.name := "triangle-exclamation")())
)(
  strong("Your session has ended"),
  br(),
  "Please login again to continue."
)
Callout(
  _.variant.danger,
  _.slots.icon(Icon(_.name := "circle-exclamation")())
)(
  strong("Your account has been deleted"),
  br(),
  "We're very sorry to see you go!"
)

Callout(  _.variant.brand,  _.slots.icon(Icon(_.name := "circle-info")()))(  strong("This is super informative"),  br(),  "You can tell by how pretty the callout is.")Callout(  _.variant.success,  _.slots.icon(Icon(_.name := "circle-check")()))(  strong("Your changes have been saved"),  br(),  "You can safely exit the app now.")Callout(  _.variant.neutral,  _.slots.icon(Icon(_.name := "gear")()))(  strong("Your settings have been updated"),  br(),  "Settings will take effect on next login.")Callout(  _.variant.warning,  _.slots.icon(Icon(_.name := "triangle-exclamation")()))(  strong("Your session has ended"),  br(),  "Please login again to continue.")Callout(  _.variant.danger,  _.slots.icon(Icon(_.name := "circle-exclamation")()))(  strong("Your account has been deleted"),  br(),  "We're very sorry to see you go!")

Appearance

Use the appearance attribute to change the callout's visual appearance (the default is filled-outlined).

Callout(
  _.variant.brand,
  _.appearance.accent,
  _.slots.icon(Icon(_.name := "square-check")())
)(
  "This ",
  strong("accent"),
  " callout draws attention"
)
Callout(
  _.variant.brand,
  _.appearance.filledOutlined,
  _.slots.icon(Icon(_.name := "fill-drip")())
)(
  "This callout is both ",
  strong("filled"),
  " and ",
  strong("outlined")
)
Callout(
  _.variant.brand,
  _.appearance.filled,
  _.slots.icon(Icon(_.name := "fill")())
)(
  "This callout is only ",
  strong("filled")
)
Callout(
  _.variant.brand,
  _.appearance.outlined,
  _.slots.icon(Icon(_.name := "lines-leaning")())
)(
  "Here's an ",
  strong("outlined"),
  " callout"
)
Callout(
  _.variant.brand,
  _.appearance.plain,
  _.slots.icon(Icon(_.name := "font")())
)(
  "No bells and whistles on this ",
  strong("plain"),
  " callout"
)

Callout(  _.variant.brand,  _.appearance.accent,  _.slots.icon(Icon(_.name := "square-check")()))(  "This ",  strong("accent"),  " callout draws attention")Callout(  _.variant.brand,  _.appearance.filledOutlined,  _.slots.icon(Icon(_.name := "fill-drip")()))(  "This callout is both ",  strong("filled"),  " and ",  strong("outlined"))Callout(  _.variant.brand,  _.appearance.filled,  _.slots.icon(Icon(_.name := "fill")()))(  "This callout is only ",  strong("filled"))Callout(  _.variant.brand,  _.appearance.outlined,  _.slots.icon(Icon(_.name := "lines-leaning")()))(  "Here's an ",  strong("outlined"),  " callout")Callout(  _.variant.brand,  _.appearance.plain,  _.slots.icon(Icon(_.name := "font")()))(  "No bells and whistles on this ",  strong("plain"),  " callout")

Sizes

Use the size attribute to change a callout's size.

Callout(
  _.size.large,
  _.slots.icon(Icon(_.name := "circle-info")())
)(
  "This is meant to be very emphasized."
)
Callout(
  _.size.medium,
  _.slots.icon(Icon(_.name := "circle-info")())
)(
  "Normal-sized callout."
)
Callout(
  _.size.small,
  _.slots.icon(Icon(_.name := "circle-info")())
)(
  "Just a small tip!"
)

Callout(  _.size.large,  _.slots.icon(Icon(_.name := "circle-info")()))(  "This is meant to be very emphasized.")Callout(  _.size.medium,  _.slots.icon(Icon(_.name := "circle-info")()))(  "Normal-sized callout.")Callout(  _.size.small,  _.slots.icon(Icon(_.name := "circle-info")()))(  "Just a small tip!")

Without Icons

Icons are optional. Simply omit the icon slot if you don't want them.

Callout(_.variant.brand)(
  "Nothing fancy here, just a simple callout."
)

Callout(_.variant.brand)(  "Nothing fancy here, just a simple callout.")

Styling

You can customize the callout's appearance mostly by setting regular CSS properties. background, border, border-radius, color, padding, margin, etc. work as expected.