ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Layout

yarn add @clayui/layout

A set of utilities for layouting out a page or content on a page

  • Examples
  • API

Stable3.56.0View in LexiconCHANGELOGstorybook demos

  • Container
  • ContainerFluid
  • Col
  • ContentCol
  • ContentRow
  • ContentSection
  • Row
  • Sheet
  • SheetHeader
  • SheetFooter
  • SheetSection

Container

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
fluid
booleanfalseAdds `.container-fluid` class to create a fluid container that doesn't expand beyond a set width
fluidSize
'sm' | 'md' | 'lg' | 'xl'falseAdds `.container-fluid-${size}` class to set max width on container.
formSize
'sm' | 'md' | 'lg' | 'xl'falseAdds the `.container-form-${formSize}` class to properly space between application controls and the form. This class only modifies the padding on the container.
view
booleanfalseAdds the `.container-view` class to properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies the padding on the container.

ContainerFluid

PropertyTypeRequiredDefaultDescription
size
React.ComponentProps<typeof Container>['fluidSize'] | falsefalse'xl'

Col

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
lg
boolean | number | 'auto'falseThe number of columns to span on large devices
md
boolean | number | 'auto'falseThe number of columns to span on medium devices
size
boolean | number | 'auto'falseThe number of columns to span on all devices
sm
boolean | number | 'auto'falseThe number of columns to span on small devices
xs
boolean | number | 'auto'falseThe number of columns to span on extra-small devices
xl
boolean | number | 'auto'falseThe number of columns to span on extra-large devices

ContentCol

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
expand
booleanfalse
float
literalfalseProvides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.
gutters
booleanfalseApplies the `autofit-col-gutters` class
shrink
booleanfalseApplies the `autofit-col-shrink` class.

ContentRow

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
float
| boolean | 'sm-down' | 'md-down' | 'end' | 'end-sm-down' | 'end-md-down'falseProvides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.
noGutters
'sm' | 'x' | 'y' | truefalse
padded
booleanfalse
verticalAlign
'center' | 'end'falseAdds class for aligning items within the row.

ContentSection

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container

Row

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
gutters
booleanfalsetrueThis removes the negative margins from .row and the horizontal padding from all immediate children columns
justify
'start' | 'center' | 'end' | 'around' | 'between'falseHorizontal positioning of row contents

Sheet

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container
size
literalfalseSetting this to sets a max-width on the sheet

SheetHeader

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container

SheetFooter

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container

SheetSection

PropertyTypeRequiredDefaultDescription
containerElement
| string | React.JSXElementConstructor<{ className: string; [key: string]: any; }>false'div'Element or component to render for container

How can this be improved? Create an issue!