Boxed simple list and carousel with arrow and full width button
Add a list section set to carousel or simple
Set space below item title = 25px
or 26px for full width section
Content width must be set to large for full width button effect
Variables:
@listitem-padding: 1rem; // space around images and text
@boxed-list-spacing: 4vw; // space on sides of full width section
@inset-list-width: 60%; // maximum width of inset list section - this is a global variable used all over
@outline-size: 1px; // width of the outline
Options:
Inset or Full width - for full width adjust @boxed-list-spacing
card block can be on or off
Site Styles:
Set the description and button colors for simple and list
For Simple list:
button color on hover is taken from card button settings
For Carousel list:
button color on hover is taken from arrow background and arrow color
-
The first title would go here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
-
The Second Title goes here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh Donec rutrum congue leo eget malesuada. a.
-
The Third Title goes here
Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada.
-
The Fourth Title goes here
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
-
The first title would go here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
-
The Second Title goes here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh Donec rutrum congue leo eget malesuada. a.
-
The Third Title goes here
Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada.
-
The Fourth Title goes here
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
-
The first title would go here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
-
The Second Title goes here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh Donec rutrum congue leo eget malesuada. a.
-
The Third Title goes here
Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada.
-
The Fourth Title goes here
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
-
The first title would go here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
-
The Second Title goes here
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh Donec rutrum congue leo eget malesuada. a.
-
The Third Title goes here
Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada.