Feature List Widget

Feature List Widget

Last updated 03.29.24

The Feature List widget is a plug and play component designed to present multiple list items, which can include a photo, text and buttons, in even columns and rows. It’s styled to look tidy and readable no matter what your content. This document goes over recommended images sizes and configuration settings. 

  • Built to display a picture or text or button(s) or all three in multiple columns and rows
  • Can have from 2 up to 8 columns and indefinite number of rows
  • Can have a background image
  • Can have a background color the full width of the page
  • Can feature a background color behind the text and image like a card

Add Feature List Widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Feature List widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Feature List Widget Properties

5. In the Feature List properties pop up, adjust various settings including text content, background color, number of buttons (1-2), button text, button style and button color. The photo can be flipped to be on the top or bottom.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Feature List Widget

Hover over the Feature List widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Feature List Widget

Hover over the Feature List widget until it displays the grab icon on the left. Simply drag and drop in a new location. 
 

Feature List Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Items per row (large screens)Select 1-8 total items
Items per row (medium screens)Select 1-8 total items
Items per row (small screens)Select 1-3 total items
Gutter TypeSelect from:
• Padding X
• Padding Y
• Margin X
• Margin Y
Graphics AlignmentSelect from:
• Align Left
• Centered
• Align Right
Buttons AlignmentSelect from:
• Align Left
• Centered
• Align Right
List Item Background ColorThe background color attribute effects the color behind the photo, text and buttons in the list item. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected: 
• Default (None)
• Primary
• Primary Color - Light
• Primary Color - Dark
• Secondary
• Secondary - Light
• Secondary - Dark
• Gradient
• White
• Light Gray
• Medium Gray
• Dark Gray
• Black
• Custom (enter color in hex format – ex. #2c6090)
Background Height AlignmentThe checkbox aligns all the list items background colors be aligned at bottom as a design feature
Invert Text ColorTypically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.
Flip LayoutThe Flip Layout checkbox swaps the text box on the right layout to a text box on the left layout to add variety to the design.
Background Color The background color attribute effects the color behind the text, buttons and the image to the full width of the page. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected: 
• Default (None)
• Primary
• Primary Color - Light
• Primary Color - Dark
• Secondary
• Secondary - Light
• Secondary - Dark
• Gradient
• White
• Light Gray
• Medium Gray
• Dark Gray
• Black
• Custom (enter color in hex format – ex. #2c6090)
[Background Image Small]Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.
For the medium background image for tablets the recommended size is 640 x 640 pixels. Image should not be more than 100kb in file size.
Background Image MediumClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.
For the medium background image for tablets the recommended size is 1024 x 512 pixels. Image should not be more than 100kb in file size.
Background Image LargeClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.
For the large background image for desktop the recommended size 1920 x 640 pixels. Image should not be more than 100kb in file size.
MarginUse margin to increase spacing between the Feature Callout widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the feature callout background area

Bottom
User can select from 1-5 rems to increase spacing below the feature callout background area

Right
User can select from 1-5 rems to increase to the right of the feature callout background area

Left
User can select from 1-5 rems to increase spacing to the left of the feature callout background area
PaddingUse padding to increase spacing within the feature callout background area. This is especially useful when using a background color to provide space between the text/buttons content and the outside edges of the feature callout rectangle.

Top
User can select from 1-5 rems to increase room in the top of feature callout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the feature callout background area

Right
User can select from 1-5 rems to increase room in the right of the feature callout background area

Left
User can select from 1-5 rems to increase room in the left of the feature callout background area

Examples

Applications

ATLAS applications are powerful databases, dashboards and creation tools for creating, categorizing and managing the data that feeds into many custom widgets. 

Pages

Page Types could be more properly defined as page templates. They are added to the site from within the Pages Application. 

Sections

Sections are the page building frameworks that hold widgets. They form the underlying structure of your page. There are three types of section.

Widgets

Widgets are plug and play components you use to build and edit your website. They are designed to look great and be simple to use no matter what their function. 

Elementum Tempus

Leo integer malesuada nunc vel. Laoreet suspendisse interdum consectetur libero. Aenean vel elit scelerisque mauris pellentesque pulvinar. Eros donec ac odio tempor orci dapibus ultrices. Suspendisse interdum consectetur libero id faucibus nisl. Posuere morbi leo urna molestie at.

Test Change

Morbi tristique senectus et netus et. Aenean et tortor at risus viverra adipiscing at in. Cras ornare arcu dui vivamus arcu. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Cursus sit amet dictum sit amet justo donec.

Lacus Vestibulum

Eget mi proin sed libero enim sed faucibus turpis in. Suspendisse potenti nullam ac tortor vitae. Quis commodo odio aenean sed adipiscing diam. Sed velit dignissim sodales ut eu sem. Felis imperdiet proin fermentum leo vel orci porta non pulvinar.

Condimentum Vitae

Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Platea dictumst quisque sagittis purus. At consectetur lorem donec massa sapien faucibus et molestie ac.

Content Image Alt Text

Lorem Ipsum Dolor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Content Image Alt Text

Aliquip ex ea Commodo

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Content Image Alt Text

Quis Nostrud Exercitation

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hail

Partly Cloudy

Sleet

Snow

Sunny

Thunderstorms

Facebook

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Instagram

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

LinkedIn

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Twitter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

YouTube

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.