Skip to content

Container ​

Max Widths

Loading...
  • Tag: <flint-container>
  • Class: FlintContainer

Import ​

ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintContainer } from '@getufy/flint-ui';

Usage ​

html
<flint-container></flint-container>

Properties ​

PropertyAttributeTypeDefaultDescription
maxWidthmax-widthContainerMaxWidth'lg'Determine the max-width of the container.
disableGuttersdisable-guttersbooleanfalseIf true, the left and right padding is removed.
fixedfixedbooleanfalseSet the max-width to match the min-width of the current breakpoint.

CSS Parts ​

NameDescription
baseThe component's base wrapper element.

CSS Custom Properties ​

PropertyDefault
--flint-container-padding16px
--flint-container-padding-sm24px
--flint-container-xs444px
--flint-container-sm600px
--flint-container-md900px
--flint-container-lg1200px
--flint-container-xl1536px