Call out box

Custom

Publishers may use the call out box to help direct a user’s attention to an excerpt of text or call to action.

Tell us what you think about our website

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

btntext

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.

Pay now

HTML


        <section class="qg-callout__box">
          <div class="qg-callout__header col-12">
             <span class="qg-callout__icon">
                 <span class="fa fa-comments"></span>
             </span>
            <h2 class="qg-callout__title">Tell us what you think about our website</h2>
          </div>

          <div class="qg-callout__content col-12">

            <div class="qg-callout__bottom-alignment">
              <div class="qg-callout__description">
                <p>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag</span>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag </span>Paragraph tag dolor sit amet<span>Span tag</span></p>
              </div>
              <a class="qg-btn btn-secondary qg-callout__cta" href="btnlink">btntext</a>
            </div>
          </div>
        </section>

Configuration options

  • This component supports having some contextual text to accompany a button.

Deprecation

We will deprecate the CSS support for <i class="fa ..."> Font Awesome icons due to incompatible to semantic HTML (https://github.com/qld-gov-au/qg-web-template/pull/391).
Please replace <i> with <span> for Font Awesome icons if they are used in your application by 22nd June 2022.

Call out box using <i> as Font Awesome icon

A warning will appear in console to remind developer to replace the Font Awesome icon if <i> is used.

Please modify your code from:

        <span class="qg-callout__icon">
          <span class="fa fa-comments"></span>
        </span>

to:

        <span class="qg-callout__icon">
          <span class="fa fa-comments"></span>
        </span>