title: "Callout" slug: "/packages/callout" category: "layout" componentNames:

• "Callout"
• "CalloutKicker"
• "CalloutBody"

Callout

The Callout component can be used to draw attention to an important sentence or quote on any page.

To see the Callout component in action, check out the callout pattern.

import { Callout, CalloutKicker, CalloutBody } from "@ds-kit/callout"

Simple example

By default the Callout component has a primary background and includes a <CalloutKicker /> and <CalloutBody />.

<Callout>
  <CalloutKicker>{"Fri kunskap"}</CalloutKicker>
  <CalloutBody>
    {
      "Datastory är en ideell organisation som gör data och kunskap tillgängligt för alla i form av visuella appar och berättelser."
    }
  </CalloutBody>
</Callout>

Colors

You can change the background and text colors via the bg prop on <Callout />. You can also modify the color of kicker and body through the color prop on <CalloutKicker /> and <CalloutBody />.

<Callout bg="blue.800">
  <CalloutKicker color="blue.300">{"Fri kunskap"}</CalloutKicker>
  <CalloutBody color="green.400">
    {
      "Datastory är en ideell organisation som gör data och kunskap tillgängligt för alla i form av visuella appar och berättelser."
    }
  </CalloutBody>
</Callout>

Paddings

You can also modify the default vertical padding via the py prop on <Callout />.

<Callout py={5}>
  <CalloutKicker>{"Fri kunskap"}</CalloutKicker>
  <CalloutBody>
    {
      "Datastory är en ideell organisation som gör data och kunskap tillgängligt för alla i form av visuella appar och berättelser."
    }
  </CalloutBody>
</Callout>

Container width

You can modify size of the container by changing the size prop on <Callout />:

<Callout size="lg">
  <CalloutKicker>{"Fri kunskap"}</CalloutKicker>
  <CalloutBody>
    {
      "Datastory är en ideell organisation som gör data och kunskap tillgängligt för alla i form av visuella appar och berättelser."
    }
  </CalloutBody>
</Callout>