diff --git a/apps/design-land/src/app/container/container.component.html b/apps/design-land/src/app/container/container.component.html index 8f521482e3..8d8d343532 100644 --- a/apps/design-land/src/app/container/container.component.html +++ b/apps/design-land/src/app/container/container.component.html @@ -1,43 +1,47 @@

Container

-

Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin.

+

Container is a basic structural element that restricts page content to a specific maximum width.

+ +

Overview

+Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.

Size

The size of a container can be defined by using the size property. There is no default size set.

+

Supported sizes: xs | sm | md | lg | xl

- - - + + + - - + + - + - + - + - - + +
SizeSyntaxMax widthDescriptionMax WidthValue
Extra smallxsExtra Small 640pxxs
Smallsm 800pxsm
Mediummd 1040pxmd
Largelg 1340pxlg
Extra largexlExtra Large 1920pxxl
diff --git a/libs/design/container/README.md b/libs/design/container/README.md index 9da1769c60..b83cc1c103 100644 --- a/libs/design/container/README.md +++ b/libs/design/container/README.md @@ -1,18 +1,21 @@ # Container -Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin. +Container is a basic structural element that restricts page content to a specific maximum width. + +## Overview +Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin. ## Size The size of a container can be defined by using the `size` property. There is no default size set. Supported sizes: `xs | sm | md | lg | xl` -| Size | Syntax | Max wdith | -| ----------- | ------ | --------- | -| Extra small | xs | 640px | -| Small | sm | 800px | -| Medium | md | 1040px | -| Large | lg | 1340px | -| Extra large | xl | 1920px | +| Description | Max Width | Value | +| ----------- | --------- | ------ | +| Extra Small | 640px | xs | +| Small | 800px | sm | +| Medium | 1040px | md | +| Large | 1340px | lg | +| Extra Large | 1920px | xl | ## Usage \ No newline at end of file