Spacer

The Spacer component can be used on any page.

Example images

Large spacer

b74b066 spacer large

Small spacer

50c495f spacer small

Code samples

{
"tasticType": "commercetools/ui/content/spacer",
"name": "commercetools UI spacer",
"category": "Content",
"icon": "favorite",
"schema": [
{
"name": "Configuration",
"fields": [
{
"label": "Value",
"field": "variant",
"type": "enum",
"values": [
{
"name": "Small",
"value": "sm"
},
{
"name": "Medium",
"value": "md"
},
{
"name": "Large",
"value": "lg"
}
]
},
{
"type": "description",
"text": "Or specify custom spacing in pixels."
},
{
"label": "Custom (Mobile-Tablet)",
"field": "customMobile",
"type": "number"
},
{
"label": "Custom (Desktop)",
"field": "customDesktop",
"type": "number"
}
]
}
]
}
import React from 'react';
import Spacer, {
SpacerProps,
} from 'components/commercetools-ui/content/spacer';
export type Props = {
data: SpacerProps;
};
const SpacerTastic: React.FC<Props> = ({ data }) => {
return <Spacer {...data} />;
};
export default SpacerTastic;