Shell

The outer container of the grid along with common page layouts.

1 main content well with 1 right rail

Navigation

Main content well

Content well continued Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Implementation

  • The .usajobs-shell element is a container that acts as the shell of the page, locking the page content at 1600px/160rem wide. We are transitioning across products to a shell width of 1600px from 1200px wide.
  • The page gutter size is 1.5rem/15px below the ML breakpoint (768px) and grows to 3rem(30px from that breakpoint on. Note however that it is set on the .usajobs-grid and not the .usajobs-shell class to make it easier to include full-bleed components.
  • The .usajobs-grid should be used within the page shell and can be used to wrap content that is not in a component or page-specific layout.