Outcomes component attributes

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

You can customize outcomes components by applying attributes.

Default legacy player runtime

You can apply the following attributes when running flows with the default legacy player.

Key	Value	Description
classes Page builder: Space delimited css classes	string	Apply CSS directly to the component. The string value can consist of multiple entries to build up a CSS class selector, separated by a space character. See CSS reference. For example, if a custom ".mw-bs .myChosenClassName" style is added to a player (either directly or through a linked stylesheet), this custom style can then be applied to the component using the value "myChosenClassName".
columns Page builder: Column layout size	string	Defines the spread of the component's width to a number of Bootstrap columns. Unless the browser window is especially narrow, the button group is rendered with the maximum 12-column width. For example, 'xs-12', 'xs-6', 'md-12', and so on. Setting this attribute causes the outcome button elements to be wrapped in a div element.
group Page builder: Horizontal or vertical grouping	string	Converts the button group into either a horizontal or vertical radio group. • horizontal: The group is laid out horizontally. • vertical: The button group is laid out vertically.
justify Page builder: Css class to justify the button layout	string	Defines the justification for the button group. • left: The button group is aligned to the left of the container. • center: The button group is aligned to the center of the container. • right: The button group is aligned to the right of the container.
outcomeClasses	string	Define custom class names that are added to each child outcome, for example, if you wish to apply a custom class to each outcome in the group (rather than just a class to the entire group element). This class can then be referenced using CSS in a custom player, to apply styling to each outcome button.

Metadata example

This metadata example uses the default legacy player runtime.

"attributes": {
  "justify": "right",
  "group": "vertical",
  "outcomeClasses": "col-xs-12",
  "classes": "myclass"
}