A List panel is the perfect solution for improving your content, as it can be used to create elements such as a button or a contents page, providing an intuitive way for you visitors to navigate around your document or complete an action.
Where to find the List panel
Navigate to a Document.
Select ‘Design’ for the Version of the Document that you want to work on.
The Version will then open in Design mode and the Panel palette (one of the most important features of TigerDesigner!) can be found to the right of your page design.
How to add a List panel
Select the ‘List’ panel type from the Panel palette.
Click and drag out an area on the page.
Select the list icon (first icon) from the flyout menu to open the List Content Editor.
Select ‘Add New Item’ to add the first list item.
Text can be added into the Headline and Body field.
A selection of icons are available to search, select and use.
Follow the above three steps for each additional list item you wish to add.
Click and drag an item to reorder it in the list.
Select a list item followed by 'Delete Selected Item' to delete it from the list.
Select the 'Save' button to save your changes.
💡List Panel Inspiration!
Lots of content to include on the page? Try adding a List panel with a single item to create a button, then position a More Information pop-up box over the top, so the reader can select it to read more.
Want to help readers navigate around your document? Create a contents page by adding a List panel with an item for each section of your document. Then position a 'Jump to a page in this version' module over the top of each item to take your readers directly to the page.
List panel Settings
When a panel is selected, the Settings palette will become active ready for you to begin choosing settings, such as font type, icon colour and keyline. There are eight main sections in this area, Name, Headline, Body, Icon, Chevron, List Items, Accessibility and Panel.
💡 Choose what you want to include in a List panel, by using the 'Include' checkbox for Headline, Body, Icon and Chevron.
1. Name
Name
The 'Name' field is set by default, but it's important to update it to something unique that reflects the content - for example, 'Contents List'. Descriptive names make it easier to identify the panels in your design.
2. Headline
This sections allow you to change the appearance of the text added into the 'Headline' field for each List item. Use the settings to make the text visually appealing and easy for your visitors to read and engage with.
Font
To change the font of your text, simply select an option from the 'Font' drop-down list. You can choose from a variety of public fonts or even upload your own fonts.
Font files should be .TTF and you must be sure that you have the rights to use them.
Size
You can find the font size field just to the right of the 'Font' drop-down list. Enter a numerical value to set a specific size - in general, this should be no smaller than 15pt for buttons.
Style
You can also change the style of your text using the 'Style' field. Font styles help to promote legibility, communicate the message or tone of your content and can add to the aesthetic of your document.
Uppercase
USING ALL CAPS CAN CERTAINLY HAVE ITS PLACE, but it's important to remember that it can also appear like you're shouting, so be mindful if using this setting. If you wish to transform your text to uppercase, simply select the 'TT' icon. Once applied the icon will change to orange.
Text Colour
The 'Text Colour' field allows you to set the colour of your text - select from the colour picker, enter a HEX code, or choose from your brand colours. Font colours can reflect your brand personality, as well as evoke emotions.
Opacity
You can find the opacity field just to the right of the 'Text Colour' option. Enter a numerical value between 0-100 to set the opacity - the higher the value, the more opaque the text will be.
Alignment
The alignment of text can add to the aesthetic of your document and make the content easier to read.
Left-aligned - text is aligned with a left edge.
Right-aligned - text is aligned with a right edge.
Centered text - text is centered between two edges.
Justified - text is aligned along both the left and right margins, creating straight edges on both sides.
Text spacing
Select the cog icon to the right of 'Alignment' to access this option.
The spacing of text is just as important as font type, size and style, as it helps to enhance the readability and legibility.
Char - the amount of space between each individual letter or character in the panel.
Word - the amount of space between each word in the panel.
Line - the amount of vertical space between each line of text in the panel.
Para - the amount space between each paragraph of text in the panel.
Pad - adjust the space between the bottom of the Headline/Strapline and the next section of text.
3. Body
The settings available for 'Body' are the same as 'Headline', with the additional of 'Bold Font Style'
Bold Fonts Style
Select the cog icon to the right of 'Alignment' to access this option.
The font style selected in the 'Bold Font Style' field will be applied to any text set as Bold in the Text panel.
💡 This setting is easy to miss, but very important! For example, choosing an italic font style, will set any bold font to use italic text.
4. Icon
Icon Position
Icons can have a large impact on your document; they can quickly communicate a message, help visitors navigate and be a useful touch target (an area that responds to user input).
Use this option to set the alignment of the icon in relation to its list item:
Left
Centre
Right
Top
Middle
Bottom
Icons cannot be vertically aligned middle if it is horizontally aligned centre.
Icon Size
Four predefined icon sizes are available in this section:
Extra small
Small
Medium
Large
You can also specify a custom size by selecting the 'Fixed' option, and entering a size into the field to the right.
Icon Colour
The 'Icon Colour' field allows you to set the colour of the icon used in a List panel - select from the colour picker, enter a HEX code, or choose from your brand colours. The colour chosen can have a large impact - should it contrast to the text colour, could it be used to highlight a message?
Select the cog icon to the right of 'Icon Colour' for additional settings.
Back Colour
The 'Back Colour' field allows you to set the background colour of the icons in a List panel - select from the colour picker, enter a HEX code, or choose from your brand colours.
Full Height
If an Icon Back Colour is set, the Full Height checkbox will become active. When ticked, the icon back colour will expand to the full height of the list item.
Corner Radius
Use the 'Corner Radius' to specify the roundness of the icon area. This setting will round all four corners equally if the icon is aligned to centre, however if it's aligned left or right, only the outward facing corners will be rounded.
Round Inner
Ticking this option will override the default behaviour of Corner Radius on left/right aligned icons, and will round the inner corners as well as the outer ones.
Icon Alignment
This is an advanced feature that can be used to fine tune the position of the icons in a List panel.
Icon Margins
Margins create breathing space around an icon area in relation to the List item. A margin goes around all four sides of the icon and it's possible to target and change the margin for each side by selecting the link/unlink icon.
Inner Margin
Set the amount of space around an icon in relation to its own area, as opposed to the icon margin. This setting is useful if a background colour has been applied to the icon and subsequently fills the area allocated to it.
Alternate Position
Use this option to alternate the left and right alignment for every other List item. If your first list item is aligned left, selecting this option will align the second item icon right and so on.
5. Chevron
A chevron is a small shape that can be included to the right of a List Item to symbolise a target or action for visitors.
Type
Specify whether you would like to use a Single Chevron, Double Chevron or Plus symbol.
Colour
Use this option to set the colour of the chevron - select from the colour picker, enter a HEX code, or choose from your brand colours.
Margins
A margin creates breathing space by adding a clear separation between the Chevron and List item. A margin goes around all four sides of the Chevron and it's possible to target and change the margin for each side by selecting the link/unlink icon.
6. List Items
Height
This option is used to choose how the height of each List item is determined.
Auto - List items will automatically render at the minimum size required to display all of their content. Different list items are likely to be different sizes if the amount of 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 - This works in the same way as 'Auto', however the panel will render all List items to be the same height as the largest item in the list, regardless of content. This helps a varied amount of content appear uniform.
Width
This option is used to choose how the width of each List item is determined.
Fill panel - List items will 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
A keyline adds a border around each List item in a List panel. Use the 'Keyline Colour' field to specify the colour that you wish to set for the border.
Keyline Width
Use the 'Keyline Width' field to specify the width of the border around each List item in a List panel. Enter a numerical value to set the keyline width - the higher the value, the thicker the keyline.
Back Colour
The 'Back Colour' field allows you to set the background colour of each List item in a List panel - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.
Opacity
You can find the opacity field to the right of the 'Back Colour' field. Enter a numerical value between 0 - 100 to set the opacity - the higher the value, the more opaque the background of the List item will be.
Select the cog icon below Opacity for additional settings.
Corner radius
Use the 'Corner Radius' to specify the roundness of the corners of each List item in a panel the panel. Enter a numerical value to set the corner radius - the higher the value, the rounder the corner.
💡 Did you know you can choose a different radius for each corner of a List item? Simply enter four comma-separated values to apply. For example, 5, 5, 0, 0 (top left corner, top right corner, bottom right corner and bottom left corner) will display a corner radius along the top of each List item.
Orientation
Choose how the List items will display in the panel; Vertically or Horizontally.
Spacing
Set the amount of space between each List item:
Fixed - specify a precise amount of space between each List item in the panel.
Auto - will distribute the List items evenly based on the height/width of the panel.
Text position
Choose how each List item will be aligned - top, bottom or middle of the individual List item.
Text margins
Margins create breathing space by adding a clear separation between the text in a List item and border of the List item. A margin goes around all four sides, and it's possible to target and change the margin for each side by selecting the link/unlink icon.
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 List items that can be added to the List panel. By default this field is set to 'Unlimited', however if you set a Maximum, the 'Add New Item' option will be greyed out once it is met.
7. Accessibility
Visible to Screen Reader
A simple checkbox option is available here for 'Visible to Screen Reader'. It will be ticked by default, but if you don't want the List panel to be visible in Accessible Mode it can be unselected.
8. Panel
Use this section carefully, as you may not need or want to apply settings such as a keyline or back colour to the panel if you are already have them applied for each List item.
Keyline Colour
Use the 'Keyline Colour' field to specify the colour that you wish to set for the border around the edge of the panel.
Keyline Width
Use the 'Keyline Width' to specify the width of the border around the edge of the panel. Enter a numerical value to set the keyline width - the higher the value, the thicker the keyline.
💡 Did you know you can choose a different thickness for each side of a panel? Simply enter four comma-separated values to apply. For example, 0, 0, 5, 0 (top keyline, right keyline, bottom keyline and left keyline) will display a keyline along the bottom of the panel only.
Back Colour
The 'Back Colour' field allows you to set the background colour of the List panel - select from the colour picker, enter a HEX code, or choose from your brand colours. Think about the choice of colour - it can reflect your brand personality, as well as evoke emotions or draw attention to content.
Opacity
You can find the opacity field to the right of the 'Back Colour' field. Enter a numerical value between 0 - 100 to set the opacity - the higher the value, the more opaque the background will be.
Corner Radius
Use the 'Corner Radius' to specify the roundness of the corners of the panel. Enter a numerical value to set the corner radius - the higher the value, the rounder the corner.
💡 Did you know you can choose a different radius for each corner of a panel? Simply enter four comma-separated values to apply. For example, 10, 10, 0, 0 (top left corner, top right corner, bottom right corner and bottom left corner) will display a corner radius along the top of the panel only.
Position X & Y
Adjust the position of the panel using X and Y coordinates. 'X' sets the position of the left edge and 'Y' sets the top edge of the panel.
Width & Height
Adjust the width and height of the panel. The size is measured in pts.
Margins
Margins create breathing space by adding a clear separation between the List panel and the keyline (if used). A margin goes around all four sides of the panel and it's possible to target and change the margin for each side by selecting the link/unlink icon.
