Frontastic component name

Spacer

Suggested page placement

Any page type

Example images

Large spacer

Small spacer

Code samples

{
  "tasticType": "frontastic/ui/content/spacer",
  "name": "Frontastic 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/frontastic-ui/content/spacer';

export type Props = {
  data: SpacerProps;
};

const SpacerTastic: React.FC<Props> = ({ data }) => {
  return <Spacer {...data} />;
};

export default SpacerTastic;

Did this page help you?