Using a blank design or editable template gives you full control of the way a panel will look, so the Settings palette is essential for creating a good design.

The Settings palette will become active when you have selected a List panel on your page.

Top tip!
When you hover over a setting in your design, a tooltip will display telling you more about it.

PANEL NAME

Specify a name for the panel, this will appear in the Layers palette.  

HEADLINE     

Include?
Ticked by default. Unticking this option will remove the headline from the text editor and hide its settings.  

Font
Select the typeface and size for the body text. Text size is specified in points. Uploaded fonts will appear in a list at the top of the drop-down menu under My Fonts. 

Style
Select the style of font for the selected typeface - e.g. bold  

Uppercase  
Transform the headline text to uppercase.  

Colour
Set text colour. Use the colour picker or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour. 

Opacity
Set opacity of text content. If set to 100, the text is fully opaque.  

Alignment
Set alignment of the text

  • Left
  • Centre
  • Right
  • Justified  

Headline additional options
To access additional options, click the icon as shown below:

Text spacing: Char
Set the amount of space between characters.  

Text spacing: Word
Set the amount of space between words.  

Text spacing: Line
Set the line height for the text.  

Text spacing: Para
Set the space between paragraphs of text.  

Text spacing: Pad
Set the amount of space below the headline,creating a gap between the headline and the strapline.  

BODY

The body settings are the same as the Headline.

Body additional options
The body additional options are the same as the Headline additional options, with one exception. To access additional options, click the icon shown below.

Bold font style
Specify the font style to use when text is styled as bold in the content editor.  

ICON

Include?
Ticked by default. Unticking will hide the settings.  

Icon position
Set the alignment of the icon in relation to its list item

  • Left
  • Centre
  • Right

Select one of the remaining three options to align the icon top, middle* or bottom.

*Icon cannot be vertically aligned middle if it is horizontally aligned centre.   

Icon size
Select one of the predefined icon sizes (extra small, small, medium, large) or specify a custom size by setting icon size to fixed.  

Icon colour
Set icon colour. Use the colour picker or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour. 

Icon additional options
To access additional options, click the icon as shown below:

Back colour
Set the background colour of the icon or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour. 

Full height
When ticked, the icon area will expand to the full height of the list item. 

Corner radius
Setting corner radius on icon will round the corners of the icon area. This setting will round all four corners equally if the icon is aligned to centre. If the icon is aligned left or right, only the outward facing corners will be rounded. For example, if the icon is aligned right, only the top right and bottom right corners will be rounded. 

Round inner
Ticking round inner will over ride the default behaviour of corner radius on left/right aligned icons. Round inner will round the inner corners as well as the outer ones. For example, by default a right aligned icon’s top right and bottom right corners would be rounded. Ticking round inner would also apply the corner radius to the  and bottom left corners. 

Icon alignment
This is an advanced feature that fine tunes the positioning of icons. 

Icon margins
Set space around the icon area of each list icon. Margins can be applied to the top, right, bottom and left of the icon. By default, these values are all linked to be the same. Clicking the chain-link icon in the centre of the margin fields will break this link,allowing a different value to be entered for top, bottom, left and right. 

Inner margin
Set the amount of space in all directions around the icon in relation to its own area, as opposed to the icon margin, which adds space around the entire icon area in relation to the list item. This setting is useful where a background colour has been applied to the icon and it subsequently fills the area allocated to it. 

Alternate pos
Alternate the left and right alignment for every other list item. If your first list item is aligned left, alternate pos will align the second item’s icon right and so on. 

CHEVRON

Include?
Unticked by default. Tick to add a chevron to each list items. It will automatically align itself to the opposite side that the icon is aligned to. 

Type
Specify whether you would like to use a single chevron, double chevron or plus symbol. 

Colour
Set the colour of the chevron or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour.

Margins
Fine tune the spacing and positioning of the chevron by specifying margins for its top, right, bottom and left. By default, these values are all linked to be the same. Clicking the chain-link icon in the centre of the margin fields will break this link,allowing a different value to be entered for top, bottom, left and right. 

LIST ITEMS

Height
Specify how the height of every list item is determined. 

  • Auto
    List items will automatically render at the minimum size required to display all their content. Different list items are likely to be different sizes if text content varies
  • Fixed
    Set a value for the height of all list items. The number field next to the height drop-down will become active when this option is selected.
  • Fill panel
    List items will be sized equally so that the entire list fills the height of the panel
  • Same
    Performs the same task as auto, setting list items to the minimum height required to fit their content. Once complete, the panel will then render all list items to be the same height as the largest item in the list, regardless of content. This helps a list with a varied amount of content appear uniform. 

Width
Specify how the width for all list items is determined. There are two options available:

  • Fill panel
    List items automatically stretch to fill the full width of the panel
  • Fixed
    Set a value for the width of all list items. The number field next to the width drop-down will become active when this option is selected. 

Keyline colour
Specify the colour for the border around the edge of the list items. Use the colour picker to set a colour or specify a precise colour using a six-digit hex code, such as “#f58220”. This method is recommended for accurately replicating a brand colour.

Keyline width
Specify the width of the border around the edge of the list items.

  • 0 - no border·
  • A single value (e.g. 5) - will set a border of uniform thickness around the list items.
  • Specifying four comma-separated values (e.g 0,0, 5, 0) will set a value for each side of the list item. In order, these are top, right, bottom and left. 

Back colour
Set the default background colour for all list items. Use the colour picker to set a colour or specify a precise colour using a six-digit hex code, such as “#f58220”. This method is recommended for accurately replicating a brand colour.

Opacity
Set the opacity of all list items.If set to 100, the items are fully opaque. 

List items alt colours

To access the list alt colours section select the icon as show below:

Alt colours
Create lists with different background colours for individual items. Select the plus icon to add alt colours and hover over to delete. Once selected, the colours can be applied to list items in the content editor for the list. 

Back shading
Create automatic tinting and shading effects for the entire list. The back shading option creates colour combinations based on the back colour specified above. 

  • None – no back shading effects are applied·
  • Auto – List items will automatically transition from back colour to white/black.
  • Fixed – List items will darken/lighten from the back colour by set intervals.
  • Fixed 2 – List items will start from white/black and blend in back colour at set intervals.

All settings have the option of darken/lighten. Where darken is set, black will be used in the above examples. Where lighten is set, white will be used in the above examples. Direction can also be specified for all back shading effects, allowing the effect to start from the top or the bottom of the list. 

List items additional options
To access additional options, click the icon as shown below:

Corner radius
Setting values in this field will round the corners of the list items

  • 0 - no rounding
  • A single value (e.g 20) will round all four corners by the same amount.
  • Specifying four comma-separated values (e.g.0, 0, 20, 20) will set a value for each corner. In order, these are top left, top right, bottom right and bottom left. 

Orientation
Set the list to display items vertically or horizontally. 

Spacing
Set the amount of space between each list item. Fixed allows you to specify a precise amount of space between each item. Auto will distribute items evenly depending on the height/width of the panel. 

Text position
Set text to vertically align top, middle or bottom for all list items. 

Text margins
Set the amount of space between the edge of the list item and its text content. By default, these values are all linked to be the same. Clicking the chain-link icon in the centre of the margin fields will break this link, allowing a different value to be entered for top, bottom, left and right. 

List alignment
Set how the list is positioned within the panel, this will be most effective on lists that do not have auto set for the list item height, width or spacing. The list can be set to horizontally align left, right or centre and vertically align top, middle or bottom. 

Max items
Specify the maximum number of items that can be added to this list in the content editor. By default this is set to unlimited. 

PANEL

Keyline Colour
Specify the colour for the border around the edge of the panel. Use the colour picker. or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour.

Keyline Width
Specify the width of the border around the edge of the panel

  • 0 - no border
  • A single value (e.g. 5) - will set a border of uniform thickness around the panel
  • Specifying four comma-separated values (e.g 0,0, 5, 0) will set a value for each side of the panel. In order, these are top, right, bottom and left.  

Back Colour
Set the background colour of the panel. Use the colour picker or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour.

Opacity
Set the opacity of the panel. If set to 100, the panel is fully opaque.  

Corner Radius
Setting values in this field will round the corners of the panel.

  • 0 - no rounding
  • A single value (e.g 20) will round all four corners by the same amount
  • Specifying four comma-separated values (e.g.0,0,20,20) will set a value for each corner. In order, these are top left,top right, bottom right and bottom left.  

Position X & Y
Specifies the position of the top left corner of the panel.  

Width & Height
Shows the current width and height of the panel. New values can be entered into the fields.  

Margins
Set the amount of space between the edge of the panel and its content.

By default, these values are all linked to be the same. Clicking the chain-link icon in the centre of the margin fields will break this link, allowing a different value to be entered for top,bottom, left and right.  

Did this answer your question?