Call-To-Action Boxes

Details

A call-to-action box is similar to a Callout Box, only it is to be used to bring attention to one or two specific actions. There are two color choices for this box and they follow the same rules as the buttons. Use the orange box for primary calls to action and the gray box for secondary actions. Note: Tertiary calls to action should not be placed in a call-to-action box because they are gererally less important to the user.

Code

<div class="calltoactionbox">
<div class=" highlights">
    <div class="container primary">
        <div class="par parsys">
            <div class="text parbase section">
                <h3>Call-To-Action Primary</h3>
                <p>Sometimes we need additional text to provide details to users who are not quite ready to click the button but they are very close. Here is a great place to do that.</p>
            </div>
            <div class="buttonlink section">
                <a href="#" class="button button-primary">Primary Button <span></span></a>
            </div>
            <div class="new section"></div>
        </div>
    </div>
</div>
</div>

Configurables

  • Background
    • Orange: use class "primary" in the div.container.
    • Gray: use class "secondary" in the div.container.
  • Position:
    • Left: use class "calltoactionbox-left" in the div.highlights
    • Right: use class "calltoactionbox-right" in the div.highlights
    • Center: use class "calltoactionbox-center" in the div.highlights.

Live Examples

Primary CTA

This space is used to provide additional details/prompt the user to click the button.

Secondary CTA

This space is used to provide additional details/prompt the user to click the button.