Expanded Avatar Card

The Expanded Avatar Card is part of the Ionic Layout Component Set. This card includes a small, circular image with a Headline, Subheadline, and Body Copy. 

Ideas for Using the Expanded Avatar Card

  • Display key milestones in your company history. Add several of these Components to a Page, each one highlighting a year with notes about the company’s achievements. 
  • Create your resume. Stack multiple Components on the Page. Showcase the company logo, name and a brief description of the work you did.
  • Share a list of products. Add the product image, the product name, and a brief use-case description. 

If you are looking for an expandable card check out Expandable Card. 

Expanded Avatar Card Properties

The Expanded Avatar Card component has the following properties:

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

  • 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 a New Tab - Toggles on or off whether the Link opens in a new tab or not in the app. 
  • 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.


      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 recommend 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.  
    • 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 - Enter the size of the font. 
    • Bold - Toggles on or off for the text to appear bold. Default is set to on. 
    • Italics - Toggles on or off for the text to appear italicized. Default is set to off. 
    • 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.  
    • 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 - Enter the size of the font. 
    • Bold - Toggles on or off for the text to appear bold. Default is set to off. 
    • Italics - Toggles on or off for the text to appear italicized. Default is set to off. 
    • 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.  
    • 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 - Enter the font size. 
    • Bold - Toggles on or off for the text to appear bold. Default is set to off. 
    • Italics - Toggles on or off for the text to appear italicized. Default is set to off. 
    • Alignment - Sets the alignment of the Body Copy Text. Choose from the dropdown list: Left, Right, or Center.

Placement

Learn more about Placement settings.

Still need help? Contact Us Contact Us