docs(design): update container component documentation (#2894)

Author: xelaint

apps/design-land/src/app/container/container.component.html

@@ -1,43 +1,47 @@
 <h1>Container</h1>
-<p>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.</p>
+<p>Container is a basic structural element that restricts page content to a specific maximum width.</p>
+
+<h2>Overview</h2>
+Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.
 
 <h2>Size</h2>
 <p>The size of a container can be defined by using the <code>size</code> property. There is no default size set.</p>
+
 <p>Supported sizes: <code>xs | sm | md | lg | xl</code></p>
 
 <table>
   <thead>
     <tr>
-      <th>Size</th>
-      <th>Syntax</th>
-      <th>Max width</th>
+      <th>Description</th>
+      <th>Max Width</th>
+      <th>Value</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>Extra small</td>
-      <td>xs</td>
+      <td>Extra Small</td>
       <td>640px</td>
+      <td>xs</td>
     </tr>
     <tr>
       <td>Small</td>
-      <td>sm</td>
       <td>800px</td>
+      <td>sm</td>
     </tr>
     <tr>
       <td>Medium</td>
-      <td>md</td>
       <td>1040px</td>
+      <td>md</td>
     </tr>
     <tr>
       <td>Large</td>
-      <td>lg</td>
       <td>1340px</td>
+      <td>lg</td>
     </tr>
     <tr>
-      <td>Extra large</td>
-      <td>xl</td>
+      <td>Extra Large</td>
       <td>1920px</td>
+      <td>xl</td>
     </tr>
   </tbody>
 </table>

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
 <design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>