Callout

A callout is a small message designed to highlight a message to the user. Harmonium has a variety of semantic callout components. The type of callout you use should be determined by the nature of the message. Use primary for informational messages, success for success messages, etc.

<div>
  <Callout>
    <Row>
      <Col>
        <p>default</p>
      </Col>
    </Row>
  </Callout>
  <Callout primary>
    <Row>
      <Col>
        <p>primary</p>
      </Col>
    </Row>
  </Callout>
  <Callout secondary>
    <Row>
      <Col>
        <p>secondary</p>
      </Col>
    </Row>
  </Callout>
  <Callout success>
    <Row>
      <Col>
        <p>success</p>
      </Col>
    </Row>
  </Callout>
  <Callout warning>
    <Row>
      <Col>
        <p>warning</p>
      </Col>
    </Row>
  </Callout>
  <Callout alert>
    <Row>
      <Col>
        <p>alert</p>
      </Col>
    </Row>
  </Callout>
</div>

<div>
  <Callout>
    <Row>
      <Col>
        <p>default</p>
      </Col>
    </Row>
  </Callout>
  <Callout primary>
    <Row>
      <Col>
        <p>primary</p>
      </Col>
    </Row>
  </Callout>
  <Callout secondary>
    <Row>
      <Col>
        <p>secondary</p>
      </Col>
    </Row>
  </Callout>
  <Callout success>
    <Row>
      <Col>
        <p>success</p>
      </Col>
    </Row>
  </Callout>
  <Callout warning>
    <Row>
      <Col>
        <p>warning</p>
      </Col>
    </Row>
  </Callout>
  <Callout alert>
    <Row>
      <Col>
        <p>alert</p>
      </Col>
    </Row>
  </Callout>
</div>