Standard Card

The Standard Card is part of the Ionic Layout Component Set. This card includes an image on the top of the card with an optional Headline, Subheadline, and Body Copy below the image. 

Ideas for Using Standard Card

  • Help your users get to know an event speaker. Upload a headshot and write a brief bio. Link the card to the speaker’s website, or another Page in the app with additional details.
  • Introduce a new product to the line-up, and share product details.

  • Set a bold background color for the Card to make it pop on the Page. This will help showcase important news and updates. Quickly connect app users using internal or external links or connect them to a Document.

    Pro Tip: The card will expand to allow for more body copy.

If you’d like to have two cards next to one another, check out the Side by Side Card.

Standard Card Properties

Configure the Standard Card Component to meet your needs.

Property Name + Instructions

Component Id

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 digital experience, an external URL, or linked action such as calling a phone number or starting an email to a designated address.

  • Dropdown Options:
    • Page or External URL

      • Existing Page: Select an existing Page from the dropdown list. When the image is clicked in a digital experience users will be taken to the linked Page.

        External Link:Enter a URL beginning with https, or add an HTML tag:

        • To trigger a phone call when clicked, type in tel: followed by a 10-digit phone number. Example: tel:5558675309.
        • To trigger an email when clicked, type in mailto: followed by an email address. Example: mailto:hello@lumavate.com.
    • Content from Documents: In the field labeled 'Select Document,' search for files saved in Lumavate Content.

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

There are two ways to set the Background Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. Configure this property if Set Background Color is toggled on.

Image

Set the image that will appear.

Dropdown Options:

  • Content from Images: In the field labeled 'Select Image,' search for images saved in Lumavate Content.
  • Upload Image: Click the button 'UPLOAD' to select an image file from your files.

ALT Text

Alt text is read aloud by screen readers used by visually impaired users, displays in place of an image if it fails to load, and is indexed by search engine bots to better understand the content of your page.

Dropdown Options:

  • Content from Text: In the field labeled 'Select Text,' search for Plain Text saved in Lumavate Content.
  • Enter Text: Type in your own Alt Text.
  • 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 - 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.  
    • 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.  
    • 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.

Standard Card Placement Settings

Format the alignment and padding around the Component. Learn more about Placement settings.

Still need help? Contact Us Contact Us

Related Articles