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

5.4.2.1 Follow Up CTA – Basic

A promotional callout designed to encourage user engagement, typically placed after primary content. This basic variation uses minimal styling to emphasize clarity and focus on the call to action.

Example

Default styling

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

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

NOTE:

The CTA Description is optional

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md " style="--custom-font-size-up: 1;">
  <div data-item="cta" class=" 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">
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&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 " style="--custom-font-size-up: 1;">
  <div data-item="cta" class=" 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">
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&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