add outlined border around image on simple list and carousel list layouts.

move arrows to top on carousel sections with “bottom” arrows - 44px

Add a list section set to simple list or carousel list

Turn on section title and whatever other elements you want to show in the section (ie image, title, description, button, section button)

Set space below item title = 43px

card block on or off

adjust padding of card block

width of border is set with @borderlinesize variable

border color is the color of the list item title color

optional label: add to the body area and select underline for the label

Set the card description link color in site styles for the label color

To add a drop shadow choose any secondary color theme. Set colors in site styles

To move arrows on carousel to top and title beside:

Set space below item title = 44px

choose arrow position of bottom under Style option (for mobile layout only)

Adjust section title alignment as desired (left or middle)

Arrows at top

Arrows remain as is

Mini Studies

Where to next?

Where to next?

3 column section

  • Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor si.

    01

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

    02

  • Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.

    Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.

    03

3 column section

  • 01

    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor si.

  • 02

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

  • 03

    Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.

    Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.

Previous
Previous

simple lists all item content in a row - optional bottom border - 41px

Next
Next

Alternating simple list with image beside content - 48px