Add Components

Create the desired layout for both Custom Cover Cards and Stories by adding components.

Here's how:

1. Click on the "Add Component +" button which will open up the component
library modal
2. Browse the component library to find a component, organized by category:
• Text
• Interactive
• Buttons
• Media
• Carousels
• Grids
3. Hover over the component you want to add to reveal the "+" button

4. Click on the component The modal will close and the component will appear in the Post Editor.

Arrange the Layout

As you add components, you can rearrange the layout by selecting a component and dragging it to its desired location in the Preview.

Modify the Content

Replace the placeholder content with your own and adjust the style settings as desired.

Core Components

Text

The text component allows you to add medium text by default. The default alignment is left. Additionally, you can toggle on "Yes" to add a link or a subtitle.

Text Banner

The text banner component allows you to add an eyebrow, title, subtitle, and button. The text is left-aligned by default except for the button text which is centered.

Headline

The headline component allows you to add a title and subtitle. The default size of the title text is H1 while the default size of the subtitle text is small. The default alignment is center.

Text Header

The text header component allows you to add H2 text by default. The default alignment is left.

Text Header with Link

The text header with link component is the same as the text header component with the additional option to add a text link aligned to the right of the text header.

Text with Button

The text with button component is the same as the text header component with the additional option to add a button aligned to the right of the text header.

Icon with Text

The icon with text component allows you to add text (eyebrow, title, and subtitle) and an image to the right or left of the text. There are additional options for modifying the image.

Category Row

The category row icon allows you to add an image, title, arrow icon, and row divider.

View

Use the view components to wrap other components.

Container View

A container can contain any number of other components. Its primary use is to add a shared background color/image for a group of components.

Dismissible Banner

A dismissible Banner is a container component with the ability to display a close button to the end user to make it dismissible. Once dismissed, the ID of the banner is saved in async storage and the banner will not show again for that user unless they uninstall or clear async storage.

Component Row

A component row is a container which allows you to easily display multiple components into a row.

Divider

The divider component allows you to add a thin, horizontal line to separate content into clear groups. The primary settings you can modify are the thickness and color of the divider with the additional option to modify padding.

Create Content

The Create content component allows you display content built within a Canvas of Flagship Create.

Interactive Components

Use the interactive components to display components which allow your end-users to engage with the content.

Countdown

The countdown component allows you to display a dynamic timer that counts to a given time in the future. This component includes a title, swatch and labels for the timer, and a container for which you can configure color and text styles. Additionally, you can configure the border width and radius of the container.

Poll

The poll component allows you to display a question with two choices for answers which end-users can tap to select an answer. You can configure the text color, font family, and font weight for the question. Similarly, you can configure the text color, font family, and font weight for the answers in addition to the background color. You can also set different styles for the unanswered and answered states.

Quiz

The quiz component allows you to display a question with multiple choice answers which end-users can tap to select an answer. This component includes a header for the question as well as a container and buttons for the answers for which you can configure color and text styles. You can also set different styles for the default and selected answer button state.

Like

The like component allows you to display a toggle-able heart icon which end-users can tap to like. Configuration options include the padding of the heart icon in its container as well as the size and default and selected state color of the icon.

Share

The share component allows you to display a share icon which end-users can tap to share a URL you enter in the Shared URL field. Configuration options include the padding and alignment (left, center, right) of the share icon in its container as well as the color and size of the share icon. Optionally, you can show a "Share" text label and manage its text styles.

Buttons

Primary Button

The primary button component allows you to add a button with a preset style.

Secondary Button

The secondary button component is the same as the primary button component with a different preset style.

Tertiary Button

The tertiary button component is the same as the primary button component with a different preset style.

Side by Side Buttons

The side by side buttons component allows you to manage a secondary button on the left and the primary on the right by default.

Stacked Buttons

The stacked buttons component allows you to manage a secondary button on the top and the primary on the bottom by default.

Button Row

The button row component allows you to manage a row of three or more buttons.

Media

Use the media components to upload or embed images or videos from a URL. The supported file formats are jpg, png, gif, and mp4.

Single Image

The single image component allows you to add an image by uploading an image or entering an image URL. Additionally, you can toggle on "Yes" to add a link or text overlay.

Image with Text Overlay

The image with text overlay component allows you to add an image with text overlaid.

Video

The video component allows you to embed a video by URL or through a service like Facebook, Youtube, and Vimeo. You can also upload a video directly to your project.

Designers can define the resize mode of the videos to be:

• Cover - Scales the size of the video to fully fill the space provided while maintaining the original aspect ratio so that the image does not look stretched.
• • Note that this may result in either the height or width getting cut off so that the aspect ratio is maintained and the space is filled
• Contain - Scales the size of the video to fit within the space provided without cutting off either the width or height and while maintaining the aspect ratio.
• • Note that this may result in empty space on one side of the video if the space is not the same aspect ratio as the video.
• Stretch - Scale width and height separately to fill the space. This will likely change the aspect ratio of the image.
• None - Displays the video as it was uploaded

To set a fixed Width or Height use the fields with those names to enter the number of pixels that should be set for each value.

The ability to define the video's size ratio is an option using the Ratio field. To calculate the ratio, divide the width by the height and enter the value in the field.

Side by Side Images

The side by side images component allows you to display two images in a row.

Image with text

The image with text overlay component allows you to add an image with text below.

Carousels

Use a carousel component to display a selection of rotating components such as images.

Image Carousel

The image carousel component allows you to add multiple images by uploading an image or enter an image URL and display them in a carousel.

You can modify the same primary settings as the single image with the additional options to add a link or text to the carousel tile. Simply click on "Add Image +" to add more tiles to the carousel.

Stacked Image Carousel

The Stacked Image Carousel component allows you to manage two rows of carousel items stacked in a single carousel.

Video Modal Carousel

The Video Modal Carousel component allows you to manage a carousel of video thumbnails.

Grids

Image Grid

The image grid component allows you to add multiple images by uploading an image or enter an image URL and display them in a grid. You can modify the same primary settings as the single image with the additional options to add a link or text to each image tile.

Additionally, you can set the number of columns (1, 2, or 3) within a grid by clicking on the number in the column selector. Simply click on "Add Image +" to add more images to the grid.

Image Grid with Text

The image grid with text component is the same component as the image grid with the ability to add multiple lines of text by default.