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

4.1.3.1.4 CTA Highlight

The CTA Highlight component is used to create a highlighted call-to-action section.

Example s

Modifier: inverted

This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.

Call to Action Title (CTA). You Should be Engaged

CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

NOTE:

The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.

<div data-item="cta-callout" class="[modifier class] c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
      <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
      <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div></div>

<div data-item="cta-callout" class="[modifier class] c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
      <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
      <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div></div>

Code Sample

Copy Code