Elements:Call To Action Blocks
Grab attention with call to actions blocks.
Basics
Create quick, easy and responsive call to actions blocks. Call to action blocks make use of colour utilities, spacer utilities, grid & flexbox functionality built into AppStrap to give you ultimate freedom to build awesome call to action blocks.
View code example Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Examples
You have totally freedom to mix and match all the utilities AppStrap has to offer to build all kinds of awesome call to action block layouts.
View code exampleCall To Action Blocks
Grab attention and drive clicks so get using them now!!
Get AppStrap
View code example
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
View code example
Awesome Features
99.9% Uptime
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
100% Bug Free
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Mobile Friendly
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Free Upgrades
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Get AppStrap Awesome Features
99.9% Uptime
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
100% Bug Free
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Mobile Friendly
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Free Upgrades
Lorem ipsum dolor consetuer adipicing sed diam ticidut erat votpat dolore
Image Backgrounds
Add background images quickly and easily using the data-bg-img="IMAGE-PATH" attribute on a wrapper element.
You can also add the classes .overlay & .overlay-op-(1-10) to apply an overlay over the background image so text shows.
Quick Parallax
Here we simply add 2 attributes to our wrapper element: data-bg-img="IMAGE-PATH" and data-css='{"background-attachment": "fixed"}'
NOTE: extended parallax functionality will be added in a future release of AppStrap.
View code exampleVideo Backgrounds
View code example Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Clickable CTA Blocks
To make the whole CTA block clickable to a URL simply add an data-url="URL" .
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Colour Options
You can make use of all the colour utilities for call to action blocks.
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Bordered
You can use the border colour classes to give CTA blocks a coloured border.
You can also remove borders from a given side or sides using the border-0 and border-SIDE-0 classes.
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Call To Action Blocks
Grab attention and drive clicks so get using them now!!
Full Width
To make a CTA block full width simply put it outside of any .container wrapper and then include a .container within it so it stretches to the full page width but the content is contained.
Call To Action Blocks
Grab attention and drive clicks so get using them now!!