Callouts

Default

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

<div class="callout">
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>

Styles

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

primary

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

success

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

info

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

warning

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

danger

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

<div class="callout">
  <h3></h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>
<div class="callout primary">
  <h3>primary</h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>
<div class="callout success">
  <h3>success</h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>
<div class="callout info">
  <h3>info</h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>
<div class="callout warning">
  <h3>warning</h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>
<div class="callout danger">
  <h3>danger</h3>
  <p>
    The first night, then, I went to sleep on the sand, a thousand miles from
    any human habitation. I was more isolated than a shipwrecked sailor on a
    raft in the middle of the ocean. Thus you can imagine my amazement, at
    sunrise, when I was awakened by an odd little voice. It said:
  </p>
</div>

Callouts options

Style and content changes for simple variations on a standard <callout>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Header text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="callout">
  <h4>Header text</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
  <footer>
    Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</div>

Alternate displays

Add .reverse for a callout with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="callout reverse">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
  <footer>
    Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</div>