Layout Content Background Anchor Settings
  1. Layout Columns: By default the flexible column frame will contain 2 layout columns, though you can select anywhere between 1-4 columns.
  2. Padding: Default padding is 24px between columns.  Alternatively, you can select for there to be no padding, or a white/gray line between columns (the line will be centered in the 24px padding between columns).
  3. Layout Column Widths: On Desktop and Tablet, Inkwell uses a 24-column layout grid. By default, these grid columns are divided evenly for each layout column. Use the following fields to customize the width of each layout column. Each layout column must be at least 3 grid columns wide, and a total of 24 grid columns must be specified (otherwise, the grid columns will be divided evenly for each layout column).
    • For each column selected (based on the Layout columns) choose the number of grid columns needed.
    • Grid Columns Used: This is a count of how many grid columns are used.  A total of 24 grid columns must be specified (otherwise, the grid columns will be divided evenly for each layout column).
  4. Layout Column Vertical Alignment: Set the vertical alignment to top, middle, or bottom for components added to each layout column.
  5. Mobile Stacking Order: On Mobile, layout columns fit to the device width and stack vertically on top of each other, and empty layout columns will not be displayed. Use the up and down buttons below to adjust the order in which each layout column appears on mobile (By default, layout column 1 is displayed first, layout column 2 is displayed second, etc.).

Examples

  1. Text Alignment: Choose to left justify (Default) or center align your headline, subheadline, and link.
  2. Headline: Specify the column frame headline text, SEO tag, and text style/size.
  3. Subheadline: Specify the text, SEO tag, and text style/size of the subheadline.
  4. Link Text: This is the user-facing text for the link.
  5. Link Action: see link actions here. You can also specifcy whether your link will open in the same window or a new one.
    • Link: specify the link your button should point to.  This can be an internal page or an external link.  You can determine whether your link will open in the same window or a new one.
    • Scroll-to-component: when selecting scroll-to-component, make sure to select an anchor name which will determine where the button should take the user when clicked upon.  The anchor name will correspond to the name set in another component in the Component Settings tab.  Be sure to preface the name of the anchor with #.
    • Modal: by design a modal URL will show all child pages that are created using a modal page template.  The anchor name specified will allow you to link to this modal from other parts of the page or other pages entirely.
  6. Link Tooltip: see tooltip details here

  1. Background color: see brand colors within the style section here. This color will appear behind the text. This should be selected even when using an image so that in case the image doesn’t render, the background will default to the color selected.

  2. Background/Foreground Contract: The Background/Foreground Contrast setting will adjust according to the Background Color that has been selected.  The author can change the setting, but if an inaccessible combination of color and contrast is selected, a warning message will appear.  See more in the styles section here. 
    • For more granular control, the option to customize these contrast settings also exist per device
  3. Image: 
    • Rendition set
      • Edit: select “Edit” to choose another image rendition set
      • Clear: select “Clear” to remove the current image option (if one is already selected).
      • Pick:  select the “Pick” option to open the DAM asset folder and search for your image rendition set
    • Alt Text: see the accessibility section here for more details
  4. Video: Video backgrounds only display on desktop devices. Ensure a suitable background image is set as a fallback for other devices. Additionally, only one component per page should utilize background video

  • Video (MP4): Select the location of your video in its mp4 format.
  • Video (Webm): Selection the location of your video in webm format.
  • Play Tooltip: The text that appears when you hover over the play button.
  • Play Accessibility Tooltip: The text that is spoken by screenreaders when the play button is in focus.
  • Pause Tooltip: The text that appears when you hover over the pause button.
  • Pause Accessibility Tooltip: The text that is spoken by screenreaders when focused on the pause button. 
  1. Image/Video Position: A dropdown that allows you choose choose the position of your video on the banner. The default is set to “Top Center”
    • Resize to full desktop browser width: Enabling this option scales images to fit the width of a browser on desktop devices.
  2. Height: This section allows you to enter a value in pixels to override the default height of the banner content for a specific device. This is useful when you want your banner to be taller than the content within it. 
  1. Anchor Name: The field where you can assign a unique anchor name to this banner component so it can be linked to from within the page if necessary.

3-column layouts

Learning

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Job Search

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Elevate

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Custom grid column widths

Custom backgrounds

Try it with these components

Basic Card

Basic cards live inside layout components like Flexible Column Frame. They are small bundles of content that are simple to set-up and easy to move around in FCF.

Learn more

Embed

The placement of videos, images, or social media widgets because a lot more customizable when they are places in Flexible Column Frame.

Learn more