Expandable Card

The Expandable Card Component is part of the Ionic Layout Component Set. Its primary purpose is to consolidate a lot of information into a minimal amount of space. When collapsed, the card only displays the Headline and Subheadline. When expanded, the card displays the Headline, Subheadline, and Body Copy. A small, circular avatar image is optional and will appear when the card is collapsed and expanded. 

Ideas for Using the Expandable Card

  • Add multiple Expandable Cards on a page to create a FAQ. Set each Headline as a question and the answer is below in the Body Copy. Add multiple in a row to show many questions.
  • Explain the history of a company, or show your resume with a photo of each company logo. Use the headline to mark important dates or companies and the body copy as a description.
  • Show off an event's sponsors. Showcase the company logo, name, and a brief bio. Add multiple in a row to show many companies.

For a static card check out Expanded Avatar Card. 

Expandable Card Properties

The Expandable Card component has the following properties:

  • Component Id - Sets the name of the Expandable Card 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.

  • Background Color - Sets the color of the card background. 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.

  • Avatar
    • Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can. Adding an avatar image is optional. If no image is uploaded then the Headline expands to the full width of the card.

      Pro Tip: Optimize all Images for the web to increase app performance and shorten load time. Square images are cropped to fit inside the circular frame. A square image 300 px by 300 px is recommended.

    • 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 recommended to always use Alt Text for any Images. 

  • Headline
    • Text - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. A Headline is not required.   
    • Text Color - Sets the color of the Headline 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.
    • Font Size - Set the size of the font in pixels. 
    • Bold Text - Toggles on or off to display the text as bold. 
    • Italic Text - Toggles on or off to display the text as italicized.
    • Alignment - Sets the alignment of the Headline Text. Choose from the dropdown list: Left, Right, or Center.
  • Subheadline
    • Text - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. A Subheadline is not required. 
    • 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. 
    • Font Size - Set the size of the font in pixels. 
    • Bold Text - Toggles on or off to display the text as bold. 
    • Italic Text - Toggles on or off to display the text as italicized.
    • Alignment - Sets the alignment of the Subheadline Text. Choose from the dropdown list: Left, Right, or Center.
  • Body Copy
    • Text - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. While Body Copy is not required, if no Body Copy is entered then the card will still show a plus icon but will not expand since there is no content to show.  
    • Text Color - Sets the color of the Body Copy 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. 
    • Font Size - Set the size of the font in pixels. 
    • Bold Text - Toggles on or off to display the text as bold. 
    • Italic Text - Toggles on or off to display the text as italicized.
    • Alignment - Sets the alignment of the Body Copy Text. Choose from the dropdown list: Left, Right, or Center.
  • Collapse Options
    • Default View - Sets the default view of the Body Copy. Choose from the dropdown list: Collapse or Expand.
    • Use Custom Icons - Toggles on or off the use of Custom Icons in the component.
    • Expand Icon - Optional property allowing an .SVG to be used in place of the default expanding plus icon. To delete a Custom Icon, click on the Trash Can to the right of this property. The default icon will be used if a Custom Icon is not uploaded.
    • Collapse Icon - Optional property allowing an .SVG to be used in place of the default collapsing minus icon. To delete a custom icon, click on the Trash Can to the right of this property. The default icon will be used if a Custom Icon is not uploaded.
    • Icon Color - Sets the color of the Expand and Collapse Icons. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Expandable Card 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.

Still need help? Contact Us Contact Us