Source: dist/css/acc_boot.css, line 10172

5.4.2.2 Follow Up CTA – Beveled Card

This variation enhances the CTA with a beveled white card set against a shaded background, drawing user attention through elevated visual hierarchy. Ideal for page breaks or key engagement moments.

Example

Default styling

Commodi dolores (30 Characters) Rerum libg dero pariatur (40 Characters)

Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)

NOTE:

The CTA Description is optional

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area btn-lg">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

Code Sample

Copy Code