Expanded Content Slide with Button

The Expanded Content Slide with Button is part of the Ionic Layout Component Set. This slide is designed to occupy a full Page in the app and other Components should not be added to a Page when the Expanded Content Slide with Button is used. The Expanded Content Slide with Button allows app end users to swipe left and right in the slide carousel. 

Ideas for Using Expanded Content Slide with Button

• Recognize event sponsors, by displaying each company’s logo, a brief description, and link to the sponsor’s company website.
• Introduce your organization’s leadership team. On each slide, display a headshot and brief bio of each executive. The button can link to their LinkedIn profile, or directly to their email. 
• Create a list of favorites. Think Oprah’s favorite things, a Buzzfeed list, or an influencer’s blog post. Make a group of your favorite, go-to, or newest, coolest items you have found and post photos of the items here. Link to their product page in the button.
• Showcase upcoming events. Each slide can display event details and link app users to the registration site.

• Under Settings, toggle on Autoplay to automatically rotate through the carousel for app users.

Looking for a different Slide format? Take a look at Slide: Expanded Content, Slide: Content, Slide: Headline, or Slide: Image.  

Expanded Content Slide with Button Properties

The Expanded Content Slide with Button component has the following properties:

• Component Id - Sets the name of the Expanded Content Slide with Button 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.

• Styling Properties
  • Headline Font Size (px) - Select the Headline Font Size in pixels.
  • Bold Headline Text - Toggle on or off to display the headline text as bold.
  • Italics Headline Text -  Toggle on or off to display the headline text as italicized. 
  • Subheadline Font Size (px) -  Select the Subheadline Font Size in pixels.
  • Bold Subheadline Text -  Toggle on or off to display the subheadline as bold. 
  • Italics Subheadline Text - Toggle on or off to display the subheadline as italicized. 
  • Body Copy Font Size (px) - Select the Body Copy Font Size in pixels. 
  • Bold Body Copy Text - Toggle on or off to display the body copy as bold.
  • Italics Body Body Text - Toggle on or off to display the body copy as italicized. 
• Individual Slide Properties (Up to 10)

  • 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. 

  • 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.

  • 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.  
  • Headline 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.
  • Headline 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.
  • Subheadline 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 Alignment - Sets the alignment of the Subheadline Text. Choose from the dropdown list: Left, Right, or Center.
  • Body Copy - 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.
  • Body Copy 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.
  • Body Copy Alignment - Sets the alignment of the Body Copy Text. Choose from the dropdown list: Left, Right, or Center.
  • Button Text - Enter the text as it should appear in the app. This text does not wrap and should be limited to 20 characters. 
  • Button Link - Sets the link to another Page in the app or an external URL. 
• Settings
  • Autoplay - Toggles on or off whether or not the slides scroll automatically. 
  • Delay - Sets how many seconds each slide will display if Autoplay is toggled on. 
  • Bullet Background Color - Sets the default color of the dots shown for each slide. There are two ways to set the Bullet Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Bullet Active Color - Sets the color for the active slide dot. There are two ways to set the Bullet Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Image Placement - Sets the image height as a percentage of the device screen. The remaining height on the slide is occupied by content. If set to 0 then the Image will occupy between 20-70 percent of the height on each slide.
• Button Properties
  • Fill - Sets the type of button. Choose from the dropdown: Clear, Outline, or Solid.
  • Size - Sets the size of the Button. Choose from the dropdown list: Default, Large, or Small.
  • Bold Text - Toggles on or off Bold Text for the component.
  • Background Color - Sets the color of the Button. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Text Color - Sets the color of the Button 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.
  • Full Width - Toggles on or off the ability for the Button to span the entire width of the column(s) set in the Placement Settings. When the Full Width is toggled on, the Solid Button will be centered within the number of columns the component is set to span. When toggled off, the Solid Button will be left-justified within the column it is set to start in. 
  • Button Opacity - Sets the opacity of the component. Use the up and down arrows to change the number from 100 to 1. A setting of 1 will make the component completely transparent and a setting of 100 is fully opaque. 
  • Border Color - Sets the color of the button's border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Border Radius - Sets how rounded button corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.
  • Border Width - Sets the width of the button border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
  • Button Shadow - Toggles on or off the shadow for the button.

Placement

Learn more about Placement settings.