Container
The container component represents the box model inside the Halstack Design System. Is a general-purpose container that allows for controlled use of our design tokens. Being generic in nature can be "over-used", so it's important to consider situations where more specific and expressive components could be used.
| Name | Type | Description | Default |
|---|---|---|---|
| background | {
attachment?: string;
clip?: string;
color?: CoreColorTokens;
image?: string;
origin?: string;
position?: string;
repeat?: string;
size?: string;
}being | Based on the CSS property background allows configuring all properties related to the background of a container. See MDN for further information. | - |
| border | BorderProperties | {
top?: BorderProperties;
right?: BorderProperties;
bottom?: BorderProperties;
left?: BorderProperties;
}being {
width?: string;
style?: LineStyleValues;
color?: CoreColorTokens;
}and 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | Based on the CSS property border allows configuring all properties related to the border of a container. | - |
| borderRadius | string | Sets the border-radius CSS property. See MDN for further information. | - |
| boxShadow | string | Sets the box-shadow CSS property. See MDN for further information. | 'none' |
| boxSizing | 'content-box' | 'border-box' | Sets the box-sizing CSS property. See MDN for further information. | 'content-box' |
Required | React.ReactNode | Custom content inside the container. | - |
| display | 'block' | 'inline-block' | 'inline' | 'none' | Sets the display CSS property. See MDN for further information. The set of values is limited to the ones related to the outer display type. If you want to apply any pattern from the inner box and how the children are laid out, we recommend you to use the Flex and Grid components. | 'block' |
| float | 'left' | 'right' | 'none' | Sets the float CSS property. See MDN for further information. | 'none' |
| height | string | Sets the height CSS property. See MDN for further information. | 'auto' |
| inset | {
top?: string;
right?: string;
bottom?: string;
left?: string;
} | Based on the CSS property inset this prop is a shorthand that corresponds to the top, right, bottom, and/or left properties. | 'auto' |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
| maxHeight | string | Sets the max-height CSS property. See MDN for further information. | 'none' |
| maxWidth | string | Sets the max-width CSS property. See MDN for further information. | 'none' |
| minHeight | string | Sets the min-height CSS property. See MDN for further information. | 'auto' |
| minWidth | string | Sets the min-width CSS property. See MDN for further information. | 'auto' |
| outline | {
width?: string;
style?: LineStyleValues;
color?: CoreColorTokens;
offset?: string;
} | Based on the CSS property outline allows configuring all properties related to the outline of a container. | - |
| overflow | OverflowValues |
{
x?: OverflowValues;
y?: OverflowValues;
}being 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | Sets the overflow CSS property. See MDN for further information. | 'visible' |
| padding | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
| position | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | Sets the position CSS property. See MDN for further information. | 'static' |
| width | string | Sets the width CSS property. See MDN for further information. | 'auto' |
| zIndex | 'auto' | number | Sets the z-index CSS property. See MDN for further information. | 'auto' |
This code provides an illustration of a custom component created exclusively with the DxcContainer. You should not copy this code, but use instead our DxcSelect.
It is imperative to exclusively utilize Halstack components for optimal compatibility and adherence to our development standards. In case you do not find one that fits your needs, please reach out to our development team first to discuss your particular situation.