In the previous issue, we briefly introduced Headless SXA. Of course, the basic components are not enough to create a website. In this article, we will show you how to add display formats to existing components.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F22ijEzeucEtPNNPmXCPtWc%2F84ba70e2f4f867ac37d047b23be5755a%2Fpromo03.png&w=3840&q=75)
Headless SXA - Variant addition
Experience Manager (XM)Next.jsHeadless SXAXM CloudPublished: 2022-12-15
Checking Promo Components
We will add a notation format to the standard component Promo. First, let's look at the current Promo, which is a combination of images and text, with the Variant set to Default.
![promo01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F51oA0v5AuueXF8yCiCiggI%2F30282c8f871d5602b32271ca643da599%2Fpromo01.png&w=3840&q=75)
This Promo code is scripted to be displayed by src\sxastarter\src\components\Promo.tsx. Within this code, the Default code is defined as follows
export const Default = (props: PromoProps): JSX.Element => {
const id = props.params.RenderingIdentifier
if (props.fields) {
return (
<div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
<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 className="field-promolink">
<JssLink field={props.fields.PromoLink} />
</div>
</div>
</div>
</div>
)
}
return <PromoDefaultComponent {...props} />
}
Add Promo display format
This time, we will use the Default code as is, change the display position of the image, and change the function name to Demo.
export const Demo = (props: PromoProps): JSX.Element => {
const id = props.params.RenderingIdentifier
if (props.fields) {
return (
<div className={`component promo ${props.params.styles}`} id={id ? id : undefined}>
<div className="component-content">
<div className="promo-text">
<div>
<div className="field-promotext">
<JssRichText field={props.fields.PromoText} />
</div>
</div>
<div className="field-promolink">
<JssLink field={props.fields.PromoLink} />
</div>
</div>
<div className="field-promoicon">
<JssImage field={props.fields.PromoIcon} />
</div>
</div>
</div>
)
}
return <PromoDefaultComponent {...props} />
}
Next, add a new Variant, Demo, to the Promo in Presentation - Headless Variants, which is included as a definition on the site.
![promo02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F236PamPphKhfInOpm6qGC1%2F4da01242ee4a2e40f0edfd4dff524248%2Fpromo02.png&w=3840&q=75)
When added, the Demo item will be added as shown below.
![promo03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F22ijEzeucEtPNNPmXCPtWc%2F84ba70e2f4f867ac37d047b23be5755a%2Fpromo03.png&w=3840&q=75)
Switching to the Demo display format, you can see the shape of the image moving downward.
![promo04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1lxeCzUiaTCHjH3lcFETA5%2F2e5c743da01f24474a9ef568c909619c%2Fpromo04.png&w=3840&q=75)
Summary
In this case, we only changed the display location of the images, but we were able to increase the display format of the components. And you can see from the above code that the parts that change the layout are written in HTML as usual and style sheets are applied. The component can be created as simply as possible.