Customize your Cover Cards, Stories, and Components with Settings.

Card Style Settings

Stacked Post

You can customize a Stacked Post using the Stacked Card Style Settings.

Background

Set a background for your post by selecting a background color or selecting a background media option.

Background Color

To select a background color, enter the hex value or use the color picker.

Background Media Option

To select a background media option, upload an image or a video.

Stacked Card Padding

Adjust the inner space of Card using the sliders or by entering a pixel value.

Scrollable Post

You can customize the container of a Cover Card in a Scrollable Post using the Card Style Settings.

1. Click on "Card Style Settings"

2. Toggle on "Yes" to expose the various settings

Background allows you to set a background color
Margin allows you to adjust the outside space of the Card
Padding allows you to adjust the inner space of the Card
Border allows you to set a border width and color

Story Style Settings

You can set a background color of a Story by using the Story Style Settings.

Here's how: 1. Click on "Story Style Settings" 2. Toggle on "Background: Yes" to expose the color field

Component Settings

Components have many shared settings and some unique settings that are specific to a component. Primary settings are displayed by default but you can access additional settings by clicking on the cog button.

Accessibility

Utilize Accessibility labels and roles to ensure your components are accessible to users who use assistive technologies like the screen readers.

Label

You can use the label field to provide an element with its accessible name.

Roles

You can select a role from the dropdown to convey the component's purpose.

Style Settings

Alignment

You can arrange text to align to the left, right, or center using the selector from either the primary or advanced settings.

Size

You can adjust text size using the selector from either the primary or advanced settings.

Color

You can adjust text color using the selector from either the primary or advanced settings.

Font Family

You can adjust font family using the selector from the advanced settings.

Weight

You can adjust text weight using the selector from either the primary or advanced
settings.

Transform

You can adjust text transform using the selector from the advanced settings.

Decoration

You can adjust text decoration using the selector from the advanced settings.

Line Height

You can adjust line height by toggling on "Line Height: On" and then using the exposed selector from the advanced settings.

Letter Spacing

You can adjust letter spacing by toggling on "Letter Spacing: On" and then using the exposed selector from the advanced settings.

Value

You can replace the placeholder text by using the Text Value field from either the primary or advanced settings.

Button Styles

Button Color and Text Styles

You can change the button style by using the selector from either the primary or advanced settings.

CTA Label

You can replace the placeholder text by using the CTA Label field from either the primary or advanced settings.

Divider Styles

Divider Thickness

You can adjust divider thickness using the selector from either the primary or advanced settings.

Divider Color

You can adjust divider color using the selector from either the primary or advanced settings.

Image Styles

Aspect Ratio

You can maintain the aspect ratio of an image by toggling on "Maintain Aspect Ratio: Yes" from the advanced settings. This will hide the resize mode and image size options.

Resize Mode

You can adjust the way an image resizes using the selector from the advanced settings.

Contain

Increase or decrease the size of the image to fill the container while preserving its aspect ratio

Cover

Image will fill the height and width of its container while preserving its aspect ratio, but often cropping the image in the process

Stretch

Image will fill to fit the container regardless of its aspect ratio.

Overlay Styles

Vertical Alignment

You can position the overlay container to align vertically to the bottom, center, or top using the vertical alignment selector from either the primary or advanced settings.

Horizontal Alignment

You can position the overlay container to align horizontally to the left, right, or center using the horizontal alignment selector from either the primary or advanced settings.

Distance

You can position the overlay container by setting the distance in pixels (px) from the bottom, left edge, and right edge using the distance input fields from either the primary or advanced settings.

Padding

You can adjust the inner spacing of the overlay container using the padding selector from either the primary or advanced settings.

Overlay Text

Reference text style options.

Video Styles

Resize Mode

You can adjust the way a video resizes using the selector from the advanced settings.

Contain

Increase or decrease the size of the video to fill the container while preserving its aspect ratio

Cover

Video will fill the height and width of its container while preserving its aspect ratio, but often cropping the video in the process

Video Fixed Height

You can set a fixed height in pixels (px) by toggling on "Video Fixed Height: Yes" to expose the input field from the advanced settings. If a ratio is set, it will override the height setting.

Ratio

A video aspect ratio indicates the orientation of a video by providing the ratio of width to height.

You can set a video aspect ratio by using the input field from the advanced settings. If a ratio is set, it will override the video fixed height setting.

If you embed a video from YouTube or Facebook, it will automatically set the ratio to 1.77778.

Fullscreen Video

You can set a video to play in fullscreen by toggling on "Fullscreen Video: Yes" from the advanced settings.

Mute Video

Videos are muted by default. You can change this setting by toggling "Mute Video" to "No" from the advanced settings.

Autoplay

A user must play a video by default. If you want a video to autoplay, you can change the default setting by toggling "Auto-play" to "Yes" from the advanced settings.

Repeat

A video will only play once by default. If you want a video to repeat, you can change the default setting by toggling "Repeat" to "Yes" from the advanced settings.

Add a Custom Font

Introducing a custom font to your content increases the personal look and feel of your posts.

Upload Custom Fonts

To make a new font available, you need to upload it through the Design Editor. Navigate to the design editor from your user menu in the top right of the screen.

From the Design Editor, find an existing Text component or add one to a new screen. You won't need this component after the upload, so it can be a temporary addition to a screen or a temporary screen.

With the Text component selected, you will have Typography section with a Font dropdown in the Appearance tab of the Inspector Panel on the right hand side.

From the Font dropdown, select "Add new font..." then follow the prompt to upload new font file. Once uploaded, the selected Text component will default to use the new font.

Using Custom Fonts

Once a font is uploaded in the Design Editor, the new font is available across all components in a project for both the Design Editor and the Content Editor.

Use Custom Fonts in the Content Editor

Add a component with text to your post, and click on the View Component Settings in the top right of the component options. New configurable options will appear, including the Font Family dropdown where you can pick the font.

Use Custom Fonts in the Design Editor

Add a text component to the canvas. With the text component selected, find the Typography prop section in the Appearance tab, and select the Font dropdown. You will see all available fonts and can choose the one that fits your needs.

Style Settings

Alignment

You can manage how the text flows in by setting to the left, right, or center by using the alignment selector.

Left-aligned text is aligned with a left edge
Right-aligned text is aligned with a right edge
Centered text is centered between two edges

Text Alignment

You can manage how the text flows in by setting to the left, right, or center by using the alignment selector.

Left-aligned text is aligned with a left edge
Right-aligned text is aligned with a right edge
Centered text is centered between two edges

Image Horizontal Alignment

You can choose to display an image on the left or right of text using the Image Alignment toggle in the Icon with Text component.

Image on Left is aligned with a left edge
Image on Right is aligned with a right edge

Image Vertical Alignment

You can choose to display an image aligned with the top or centered with the text using the Image Vertical Alignment toggle in the Icon with Text component.

Top is aligned with a top edge
Center is aligned between two edges

Border

You can add a border by setting its width in pixels (px) and its color by entering a color code or selecting from the color picker.

Corner Radius

You can set a corner radius to round the corner where two lines meet. Use this to create shapes with rounded corners.

You can adjust by using the slider or input field in pixels (px).

Color

You can change the Color of various elements by entering a color code or selecting from the color picker to adjust the value.

Elements with the color picker available include:

Background Color
Border Color
Divider Color
Text Color

Background Color

You can change the Background Color by entering a color code or selecting from the color picker to adjust the value.

Border Color

You can change the Border Color by entering a color code or selecting from the color picker to adjust the value.

Divider Color

You can change the Divider Color by entering a color code or selecting from the color picker to adjust the value.

Text Color

You can change the Text Color by entering a color code or selecting from the color picker to adjust the value.

Divider Thickness

You can adjust the thickness of a divider used to separate content with the Divider Thickness input field in pixels (px).

Font Family

You can choose from variations on a typeface design by selecting from the Font Family picker.

Height

You can set the vertical size of a button using Height. Use the slider or input field in pixels (px) to adjust the value.

Letter spacing

You can set the horizontal distance between letters to affect the visual density of text using Letter Spacing. Use the slider or input field in pixels (px) to adjust.

Line Height

You can set the vertical distance between lines of text using Line Height. Use the slider or input field in pixels (px) to adjust the value.

Margins

You can control the space outside of an element with Margins.

Adjust the top, bottom, left, or right margins by using the slider or input field in pixels (px). You can set margin values uniformly by clicking on the lock icon to an active state.

Padding

You can control the space inside of an element with Padding.

Adjust the top, bottom, left, or right padding by using the slider or input field in pixels (px). You can set margin values uniformly by clicking on the lock icon to an active state.

Resize Mode

You can choose how an image should scale when the frame doesn't match the raw image dimensions by setting the Resize Mode option to:

Contain
Cover
Stretch

Contain

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

Cover

Scale the image uniformly (maintain the image's aspect ratio) so that:

Both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)
At least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)

Stretch

Scale width and height independently, This may change the aspect ratio of the src.

Text Decoration

You can set the text formatting to none, underline, or line-through from the Text Decoration picker. The default is set to none.

Text Transform

You can set the text formatting to none, uppercase, lowercase, or capitalize from the Text Transform picker. The default is set to none.

Width

You can set the horizontal size of a button using Width. Use the toggle to adjust the value.

Dynamic Width

You can set the button's width to fit its text label by selecting the Dynamic Width toggle.

Fixed Width

You can set the button's width manually by selecting the Fixed Width toggle. Set its width by using the slider or input field in pixels (px).

Full Width

You can set the button's width to expand to the entire width of its parent container by selecting the Full Width toggle.