No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Container
The ab-container is a general purpose component that can add padding, margin, border-radius, borders, box-shadow etc to an element
This is one of the most important components in the design system. The container component is used to add padding and margin between elements, and is also perfect when you want to compose your own component by using the building blocks in the design system
Example
Show source
Oh no! The source is not available.
Display properties
  • .ab-container: display block as default
  • .ab-container--inline: display inline
  • .ab-container--inline-block: display inline-block
Sizes
  • .ab-container--center: center the container
  • .ab-container--full: 100% width
  • .ab-container--wide: 1200px max-width
  • .ab-container--large: 900px max-width
  • .ab-container--medium: 600px max-width
  • .ab-container--narrow: 400px max-width
  • .ab-container--full-height: 100% height
Padding
  • ab-container--p-100 to 900: Padding on all sides
  • ab-container--py-100 to 900: Vertical padding
  • ab-container--px-100 to 900: Horisontal padding
  • ab-container--pl-100 to 900: Left padding
  • ab-container--pr-100 to 900: Right padding
  • ab-container--pt-100 to 900: Top padding
  • ab-container--pb-100 to 900: Bottom padding
Margin
  • ab-container--m-100 to 900: Margin on all sides
  • ab-container--my-100 to 900: Vertical margin
  • ab-container--mx-100 to 900: Horisontal margin
  • ab-container--ml-100 to 900: Left margin
  • ab-container--mr-100 to 900: Right margin
  • ab-container--mt-100 to 900: Top margin
  • ab-container--mb-100 to 900: Bottom margin
Depth (box-shadow)
  • ab-container--depth-100
  • ab-container--depth-200
  • ab-container--depth-300
  • ab-container--depth-400
  • ab-container--depth-500
Border radius
  • ab-container--radius-100
  • ab-container--radius-200
  • ab-container--radius-300
  • ab-container--radius-400
  • ab-container--radius-500
Background color
  • ab-container--bg-primary-100 to 900
  • ab-container--bg-ui-100 to 900
  • ab-container--bg-secondary-100 to 900
  • ab-container--bg-active-100 to 900
  • ab-container--bg-warning-100 to 900
  • ab-container--bg-positive-100 to 900
Borders
  • .ab-container--border-transparent
  • .ab-container--border-warning-600
  • .ab-container--border-ui-300
  • .ab-container--border-positive-300
  • .ab-container--border-warning-300