Skip to main contentSkip to search
Clay
  • 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
    • DropDown
    • 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
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Grid

The aim of the Lexicon layout framework is to provide a common structural reference that contributes to streamlining the component construction and page composition processes, as well as favoring visual consistency between the different elements of the interface.

Check the Lexicon Grid Pattern for a more in-depth look at the motivations and proper usage of this.
  • Container
  • Container Fluid
  • Container Form Lg
  • Container View

Container

.container has a specific max-width for each grid breakpoint (e.g., Atlas 540px wide, 720px wide, 960px wide, and 1248px wide).

Base
Breakpoint (min-width) Container (max-width)
576px 540px
768px 720px
992px 960px
1200px 1140px
Atlas
Breakpoint (min-width) Container (max-width)
576px 540px
768px 720px
992px 960px
1280px 1248px
container
Copied!
Code Sample (expand to see it)
<div class="container"></div>

Container Fluid

Use the .container-fluid class with the .container-fluid-max-{sm|md|lg|xl} class to create fluid containers that don't expand beyond a set width (e.g., For Atlas xl => 1248px).

https://getbootstrap.com/docs/4.0/layout/grid/

Base
Name Container Fluid (max-width)
.container-fluid-max-sm 540px
.container-fluid-max-md 720px
.container-fluid-max-lg 960px
.container-fluid-max-xl 1140px
Atlas
Name Container Fluid (max-width)
.container-fluid-max-sm 540px
.container-fluid-max-md 720px
.container-fluid-max-lg 960px
.container-fluid-max-xl 1248px
container-fluid-max-sm
container-fluid-max-md
container-fluid-max-lg
container-fluid-max-xl
Copied!
Code Sample (expand to see it)
<div class="container-fluid container-fluid-max-sm"></div>

<div class="container-fluid container-fluid-max-md"></div>

<div class="container-fluid container-fluid-max-lg"></div>

<div class="container-fluid container-fluid-max-xl"></div>

Container Form Lg

Use the .container-form-lg class with the .container class or .container-fluid class to properly space between application controls and the form. This class only modifies the padding on the container.

f you need additional breakpoints such as .container-form-sm|md|xl, you will need to define them yourself.

Application

    • Action
    • Another action
    • Something else here
    • Separated link

Form Title

Copied!
Code Sample (expand to see it)
<div class="container-fluid container-fluid-max-xl container-form-lg"></div>

Container View

Use the .container-view class with the .container class or .container-fluid 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.

Application

    • Action
    • Another action
    • Something else here
    • Separated link
Item Title Size Status Creation Date Modification Date
PNG Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds. 700KB Approved 6 days ago 4 days ago
  • Remove
  • Download
  • Checkout
Copied!
Code Sample (expand to see it)
<div class="container-fluid container-fluid-max-xl container-view"></div>

How can this be improved? Create an issue!