CTAs and Featurette
Demo of all CTA UI Components built in ROCK instance
1 col CTA Text Only
css
<section class="bulma-section bulma-has-background-primary">
<div class="bulma-columns bulma-is-centered">
<div class="bulma-column bulma-is-three-quarters bulma-has-text-centered">
<p class="bulma-is-size-4 bulma-has-text-white bulma-has-text-weight-semibold">
This is a 1 col CTA text only (section > cols > col 3/4 > p tag) This uses the Bulma classes to closely match the Figma design's spacing without any custom CSS specifically about 188px on each side up to 1400 and 48px on the y-axis.
</p>
</div>
</div>
</section>1 col CTA Text and Button
css
<section class="bulma-section bulma-has-background-primary">
<div class="bulma-columns bulma-is-centered">
<div class="bulma-column bulma-is-three-quarters bulma-has-text-centered">
<p class="bulma-is-size-4 bulma-has-text-white bulma-has-text-weight-semibold">
This is a 1 col CTA (section > cols > col 3/4 > p tag) This also has a button per bulma's basic button build + some outline and background.
</p>
<div class="bulma-buttons bulma-is-centered bulma-mt-5 " >
<button class="bulma-button text-capitalize bulma-is-outlined bulma-px-6 bulma-py-3 bulma-has-background-white bulma-has-text-black bulma-is-uppercase">
Bulma Button
</button>
</div>
</div>
</div>
</section>CTA 2 col text and button
css
<section class="bulma-section bulma-has-background-primary">
<div class="bulma-columns bulma-is-centered">
<div class="bulma-column bulma-is-three-quarters">
<div class="bulma-columns bulma-is-vcentered">
<div class="bulma-column bulma-is-three-quarter">
<p class="bulma-is-size-4 bulma-has-text-white bulma-has-text-weight-semibold bulma-mb-3">
Header of size 4
</p>
<p class="bulma-is-size-6 bulma-has-text-white bulma-has-text-weight-semibold">
This is a 1 col CTA text only (section > cols > col 3/4 > p tag). This uses the Bulma classes to closely match the Figma design's spacing without any custom CSS, specifically about 188px on each side up to 1400 and 48px on the y-axis.
</p>
</div>
<div class="bulma-column bulma-is-one-quarter">
<div class="bulma-buttons bulma-is-vcentered">
<button class="bulma-button bulma-is-outlined bulma-px-6 bulma-py-3 bulma-has-background-white bulma-has-text-black bulma-is-uppercase">
Bulma Button
</button>
</div>
</div>
</div>
</div>
</div>
</section>2 col CTA Image text and button
css
<section class="bulma-section bulma-has-background-primary">
<div class="bulma-columns bulma-is-centered">
<div class="bulma-column bulma-is-three-quarters">
<div class="bulma-columns bulma-is-vcentered">
<div class="bulma-column bulma-is-one-quarter">
<figure class="bulma-image bulma-is-rounded">
<img src="https://bulma.io/assets/images/placeholders/256x256.png" />
</figure>
</div>
<div class="bulma-column bulma-is-three-quarters">
<p class="bulma-is-size-4 bulma-has-text-white bulma-has-text-weight-semibold bulma-mb-4">
Header of size 4
</p>
<p class="bulma-is-size-6 bulma-has-text-white bulma-has-text-weight-semibold">
This is a 1 col CTA text only (section > cols > col 3/4 > p tag). This uses the Bulma classes to closely match the Figma design's spacing without any custom CSS, specifically about 188px on each side up to 1400 and 48px on the y-axis.
</p>
<div class="bulma-buttons bulma-mt-5">
<button class="bulma-button bulma-is-outlined bulma-px-6 bulma-py-3 bulma-has-background-white bulma-has-text-black bulma-is-uppercase">
Bulma Button
</button>
</div>
</div>
</div>
</div>
</div>
</section>CTA - 2 Columns Contact Us with Half Image
css
<section class="bulma-section bulma-has-background-primary">
<div class="bulma-columns bulma-is-gapless bulma-is-vcentered bulma-is-centered">
<div class="bulma-column bulma-is-three-quarters">
<div class="bulma-columns bulma-is-vcentered">
<div class="bulma-column bulma-is-half">
<figure class="bulma-image bulma-is-square bulma-is-rounded">
<img src="https://bulma.io/assets/images/placeholders/256x256.png" />
</figure>
</div>
<div class="bulma-column bulma-is-half">
<p class="bulma-is-size-4 bulma-has-text-white bulma-has-text-weight-semibold bulma-mb-3">
Header of size 4
</p>
<p class="bulma-is-size-6 bulma-has-text-white bulma-has-text-weight-semibold">
This is a 1 col CTA text only (section > cols > col 3/4 > p tag). This uses the Bulma classes to closely match the Figma design's spacing without any custom CSS, specifically about 188px on each side up to 1400 and 48px on the y-axis.
</p>
<div class="bulma-buttons bulma-mt-5">
<button class="bulma-button bulma-is-outlined bulma-px-6 bulma-py-3 bulma-has-background-white bulma-has-text-black bulma-is-uppercase">
Bulma Button
</button>
</div>
</div>
</div>
</div>
</div>
</section>CTA - 5 Columns Contact + BG image
- in-line style for setting the diagonal colors
- in-line style for setting bg image (bulma has no utility for this)
css
<section class="">
<div class="bulma-columns">
<div class="bulma-column bulma-is-two-fifths bulma-is-flex bulma-is-align-items-center bulma-is-justify-content-center bulma-section"
style="background-image: url('https://www.shutterstock.com/image-vector/image-preview-icon-picture-placeholder-600nw-1716511726.jpg'); background-size: cover; background-position: center; ">
<p class="bulma-is-size-3 bulma-has-text-black bulma-has-text-centered bulma-has-text-weight-semibold bulma-mb-3">
Header of size 3
</p>
</div>
<div
class="bulma-column bulma-is-one-fifths bulma-is-vcentered bulma-has-text-centered bulma-is-centered bulma-section "
style="background: linear-gradient(125deg, #ffffff 50%, #14161a 50%);"
>
</div>
<div class="bulma-column bulma-is-two-fifths bulma-is-flex bulma-is-align-items-center bulma-is-justify-content-start bulma-section bulma-has-background-secondary">
<div>
<p
class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3"
>
<a href="tel:+1234567890"> <i class="fas fa-phone"></i> Call Us </a>
</p>
<p
class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3"
>
<a href="mailto:info@example.com">
<i class="fas fa-envelope"></i> Leave a Message
</a>
</p>
<p
class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3"
>
<a href="https://facebook.com/yourpage" target="_blank">
<i class="fab fa-facebook"></i> Like on Facebook
</a>
</p>
</div>
</div>
</div>
</section>CTA 2 Col Contact Gradient
- in-line style for setting the gradient colors
css
<section class="">
<div class="bulma-columns">
<!-- Left column -->
<div class="bulma-column bulma-is-half bulma-has-background-primary bulma-is-flex bulma-is-align-items-center bulma-is-justify-content-center" style="background: linear-gradient(to right, rgb(37, 37, 37) 0%, #14161a 100%);">
<p class="bulma-is-size-3 bulma-has-text-white bulma-has-text-weight-semibold bulma-has-text-centered">
Header of size 3
</p>
</div>
<div
class="bulma-column bulma-is-half bulma-is-flex bulma-is-align-items-center bulma-is-justify-content-start bulma-has-background-secondary"
>
<div>
<p class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3">
<a href="tel:+1234567890"><i class="fas fa-phone"></i> Call Us</a>
</p>
<p class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3">
<a href="mailto:info@example.com"><i class="fas fa-envelope"></i> Leave a Message</a>
</p>
<p class="bulma-is-size-5 bulma-has-text-white bulma-has-text-left bulma-has-text-weight-semibold bulma-mb-3">
<a href="https://facebook.com/yourpage" target="_blank"><i class="fab fa-facebook"></i> Like on Facebook</a>
</p>
</div>
</div>
</div>
</section>