Create a variant for a component

SXA comes with a set of default components. To encourage reusability, designers and front-end developers can also create variants. Variants are configurable adaptations of the default components. This gives authors more options in the way they present their content.

Creating a variant is a two-step process. First, you create the code for the variant in the relevant component TSX file, for example Promo.tsx. Then you create a variant in the Content Editor and refer to the variant as defined in the code.

The component TSX files are in the following directory:

[application root]\src\components

Code example:

The following example shows two variants for the Promo component: Default and Link. The Default variant renders a text field, and the Link variant renders a text field and a link.

RequestResponse

export const Default = (props: PromoProps): JSX.Element => {
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
          <div className="field-promoicon">
            <JssImage field={props.fields.PromoIcon} />
          </div>
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <JssRichText field={props.fields.PromoText} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};

RequestResponse

export const Link = (props: PromoProps): JSX.Element => {
  if (props.fields) {
    return (
      <div className={`component promo ${props.params.styles}`}>
        <div className="component-content">
          <div className="promo-text">
            <div>
              <div className="field-promotext">
                <Text className="promo-text" field={props.fields.PromoText} />
              </div>
            </div>
            <div className="field-promolink">
              <JssLink field={props.fields.PromoLink} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <PromoDefaultComponent {...props} />;
};

To create a variant in the Content Editor:

In the Content Editor, click the site and open the Presentation/Headless Variants folder. This folder lists all the components that allow variants.

Note

To add a component to the folder, contact your administrator.
Right-click the component that you want to add the variant to, select Insert, and then select Variant Definition.
Enter a name that is consistent with how the variant is named in the code and click OK, for example Link.
In the Variant Details section, specify the page templates that the variant is available for. Double-click the relevant page template to move it to the list of selected items, and then click Save. If there are no templates selected, the variant is available for all pages.

Optionally, in the Appearance section, you can add a thumbnail image for the variant. This image appears in the Variant list and can help content editors select the best variant for their purpose.

Content Editor	Experience Editor

Save your changes.

Do you have some feedback for us?

If you have suggestions for improving this article,