Avatar Card

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

Ideas for Using Avatar Card

  • Want to highlight some board members or company leaders?
  • Add multiple Components to a Page to showcase more than one person.

  • Use this Component to navigate app users to important sections of your app, and link the card to a Page within the app.

    Pro Tip: Change the Component background color to make it pop on the Page.

Avatar Card Properties

The Avatar Card component has the following properties:

  • Component Id - Sets the name of the 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 set to on. 
    • Italics - Toggles on or off of the text to appear italicized. Defaults 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.

Placement

Learn more about Placement settings.

Still need help? Contact Us Contact Us