Foundation - Callout SASS Reference

Variables

You can change the styles of the components by using the following SASS variables as listed in the table.

Sr.No.	Name & Description	Type	Default Value
1	$callout-background It defines the default background color.	Color	$white
2	$callout-background-fade It specifies the fade value for callout backgrounds.	Number	85%
3	$callout-border It displays border style for callouts.	List	1px solid rgba($black, 0.25)
4	$callout-margin It displays callouts bottom margin.	Number	0 0 1rem 0
5	$callout-padding It provides callouts inner padding.	Number	1rem
6	$callout-font-color It defines font color of the callouts.	Color	$body-font-color
7	$callout-font-color-alt It defines font color of the callouts if there is a dark background for callouts.	Color	$body-background
8	$callout-radius It defines border radius for callouts.	Color	$global-radius
9	$callout-link-tint It provides tint links for colored panels and can be disable by setting it to false.	Number or Boolean	30%

You can use the mixins to build the CSS class structure for your components as described below.

It adds styles such as padding, margin to a callout and styles can be included using the following mixin −

@include callout-base

It specifies quick styles by using single color as a baseline for the callout and you can include styles using the following mixin −

@include callout-style($color);

It can be specified as defined in the following table −

Sr.No.	Parameter & Description	Type	Default Value
1	$color It sets the background color for callout.	Color	$callout-background

Sr.No.

Parameter & Description

Type

Default Value

$color

It sets the background color for callout.

Color

$callout-background

It specifies styles for callout and it can include styles using the following mixin −

@include callout($color);

It can be determined as shown in the below table −

Sr.No.	Parameter & Description	Type	Default Value
1	$color It sets background color for the callout.	Color	$callout-background