Import
import { Box } from '@contentful/f36-components';// orimport { Box } from '@contentful/f36-core';
Examples
Margins & Paddings
Margins and paddings for Box component are based on our spacing system.
Here is an overview of spacings that are available:
spacing2Xs
spacingXs
spacingXs
spacingS
spacingM
spacingL
spacingXl
spacing2Xl
spacing3Xl
spacing4Xl
Here is a good example that demonstrates how you can apply margin
and padding
properties to the Box
component:
as
property
If you want to keep all the styling you've applied to a component but just switch what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.