Callout

Playground

<>
  <Box mb="2">
    standard:
    <Callout>Callout</Callout>
    <Callout variant="overlay">overlay</Callout>
    <Callout variant="inverse">inverse</Callout>
  </Box>

  <Box mb="2">
    "announcement" skin:
    <Callout skin="announcement">default</Callout>
    <Callout skin="announcement" variant="overlay">
      overlay
    </Callout>
    <Callout skin="announcement" variant="inverse">
      inverse
    </Callout>
  </Box>

  <Box mb="2">
    "new" skin:
    <Callout skin="new">default</Callout>
    <Callout skin="new" variant="overlay">
      overlay
    </Callout>
    <Callout skin="new" variant="inverse">
      inverse
    </Callout>
  </Box>

  <Box mb="2">
    "holiday" skin:
    <Callout skin="holiday">default</Callout>
    <Callout skin="holiday" variant="overlay">
      overlay
    </Callout>
    <Callout skin="holiday" variant="inverse">
      inverse
    </Callout>
  </Box>

  <Box mb="2">
    "foil" skin:
    <Callout skin="foil">default</Callout>
  </Box>

  <Box mb="2">
    "error" skin:
    <Callout skin="error">default</Callout>
  </Box>
</>

<>
  <Callout>Callout</Callout>
  <Callout skin="announcement">"announcement" skin</Callout>
  <Callout skin="discount">"discount" skin</Callout>
  <Callout skin="new">"new" skin</Callout>
  <Callout skin="holiday">"holiday" skin</Callout>
  <Callout border="none">using borderless option</Callout>
</>

<div class="callout">Recommended</div>
<div class="callout callout-skin-announcement">"announcement" skin</div>
<div class="callout callout-skin-discount">"discount" skin</div>
<div class="callout callout-skin-holiday">"holiday" skin</div>
<div class="callout callout-skin-announcement callout-overlay">
  "announcement" skin plus "overlay" variant
</div>
<div class="callout callout-skin-announcement callout-inverse">
  "announcement" skin plus "inverse" variant
</div>

"mini" Callouts

Callouts ordinarily get smaller on smaller screens. However, the "mini" variant will cause the Callout to always be small, on any screen.

<>
  <Callout>default</Callout> <Callout sizeVariant="mini">"mini"</Callout>
</>

<span class="callout callout-mini">"mini"</span>

Components

Guidelines

Design Guidelines

• Only use a skin for the purpose indicated by the skin name, so the "holiday" skin is only for holiday messaging, not just because you want to use red. The "error" skin is to denote errors or issues, such as an item being out of stock.

• Use the "overlay" variant when the Callout is overlaid on top of an image.

• The "new" skin is only for Callouts that say "NEW". Please note that the Callout will automatically capitalize the text; for accessibility reasons, you should not capitalize the source text, and should use a value of "New" and not "NEW".

Copy Guidelines

• Text should be short — no more than 14 characters. If there is not enough room to display the whole component, its text will ellipse.

• A callout that says "New" should only be used for products launched within the last 6 months.

• A callout that says "Top Rated" should only be used for products with a rating of 3.5 stars or more.

• A callout that says "Up to NN% Off" should only be used for product "Red" sales.