List

The List is part of the Ionic Ionic Component Set. It allows Studio Users to create a list containing text, images, and icons in their apps.

Ideas for Using List

List items can be as detailed or simplified as needed. Add body copy for added information, or simply link a list item to another Page to help users explore further.
Adding images to each or some of the list items is an option. It draws attention and can give users more context.
Display a list of top trends or best practices. Link each item to another Page or external website.
Show all office locations. Add the mailing address or phone number in the body copy. Each location can link to an email address or driving directions.
Recommend top products for users to try.
Help new employees onboard byList resources for employees. Add links to each list item to provide additional information. List items can be linked to an external website, another page in the app, or a Document.

Pro Tip: Set a background color that contrasts with the font color to make your List pop on the page.

If you would like app users to be able to check off completed list items, check out Checklist.

List Properties

The List component has the following properties:

Component Id - Sets the name of the Expanded Content Slide component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
Set Background Color - Toggles on or off to activate the Background Color settings.
Background Color - Sets the color of the background of the list. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
List Title Text - Enter the text as it should appear in the list's title.
List Title Font Size - Enter the font size in pixels.
List Title Bold - Toggles on or off for the text to appear bold. Default is set to on.
List Title Italics - Toggles on or off for the text to appear italicized. Default is set to off.
Lits Title Text Alignment - Sets the alignment of the text. Choose between left, right, and center.
List Title Text Color - Sets the color of the text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Styling Properties

Headline Font Size (px) - Select the Headline Font Size in pixels.
Headline Text Bold - Toggle on or off to display the headline text as bold. Default is set to on.
Headline Text Italic - Toggle on or off to display the headline text as italicized. Default is set to off.
Headline Text Alignment - Sets the alignment for the headline. Choose between Left, Right, or Center.
Headline Text Color - Sets the color of the subheadline text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Subheadline Font Size (px) - Select the Subheadline Font Size in pixels.
Subheadline Text Bold - Toggle on or off to display the subheadline text as bold. Default is set to off.
Subheadline Text Italic - Toggle on or off to display the subheadline text as italicized. Default is set to on.
Subheadline Text Alignment - Sets the alignment for the subheadline. Choose between Left, Right, or Center.
Subheadline Text Color - Sets the color of the subheadline text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Body Copy Font Size (px) - Select the Body Font Size in pixels.
Body Copy Text Bold - Toggle on or off to display the body text as bold. Default is set to off.
Body Copy Text Italic - Toggle on or off to display the body text as italicized. Default is set to off.
Body Copy Text Alignment - Sets the alignment for the body. Choose between Left, Right, or Center.
Body Copy Text Color - Sets the color of the body text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Individual List item Properties (Up to 10)
- Headline Text - Enter the text as it should appear in the headline.
- Subheadline Text - Enter the text as it should appear in the subheadline.
- Body Copy - Enter the text as it should appear in the body.
- Link - Sets the link to another Page in the app or an external URL.
  
  Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.
- Open Link In New Tab - Toggle on or off to open the link in a new tab.
- Avatar Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.
  
  Pro Tip: Optimize all Images for the web to increase app performance and shorten load time.
- ALT Text - Sets the text that appears if the Image fails to load. The Alt Text appears in a blank box where the Image would normally appear. It's recommend to always use Alt Text for any Images.
- Icon - Upload a .SVG to display an Icon. To remove the uploaded icon, click the Trash Can.
- Ionic Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If blank, no icon will display.
- Icon Color - Sets the color of the Icon. There are two ways to set the IconColor: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
Expanded Content Slide Placement Settings
The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:
- Column Start - Sets the column where the Component will start.
- Column Span - Sets how many columns the Component will span.
- Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
- Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.