You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: apps/docs/content/3-components/2-library/container.mdx
+52-6
Original file line number
Diff line number
Diff line change
@@ -17,6 +17,58 @@ libraries:
17
17
18
18
## Usage
19
19
20
+
### Classes guidelines
21
+
22
+
-`gi-layout-container`: Default container with Tailwind's container behaviour from md breakpoint.
23
+
-`gi-layout-container-max-xl`: Container capped at 1280px for optimal readability.
24
+
-`gi-layout-container-full-width`: Full-width container capped at 2xl (1536px).
25
+
26
+
### Container Props
27
+
28
+
-**children** (required): A React node representing the content to be rendered inside the container.
29
+
-**id** (optional): A string to uniquely identify the container, useful for testing or targeting specific containers in styles or scripts.
30
+
-**insetTop** (optional): Defines the top padding of the container. Options are `none`, `md`, `lg`, and `xl`.
31
+
-**insetBottom** (optional): Defines the bottom padding of the container. Options are `none`, `md`, `lg`, and `xl`.
32
+
33
+
### Responsive Inset Values
34
+
35
+
<table>
36
+
<thead>
37
+
<tr>
38
+
<th>Inset value</th>
39
+
<th>Desktop</th>
40
+
<th>Tablet</th>
41
+
<th>Mobile</th>
42
+
</tr>
43
+
</thead>
44
+
<tbody>
45
+
<tr>
46
+
<td>none</td>
47
+
<td>***0px***</td>
48
+
<td>***0px***</td>
49
+
<td>***0px***</td>
50
+
</tr>
51
+
<tr>
52
+
<td>md</td>
53
+
<td>***32px***</td>
54
+
<td>***24px***</td>
55
+
<td>***16px***</td>
56
+
</tr>
57
+
<tr>
58
+
<td>lg</td>
59
+
<td>***48px***</td>
60
+
<td>***36px***</td>
61
+
<td>***24px***</td>
62
+
</tr>
63
+
<tr>
64
+
<td>xl</td>
65
+
<td>***64px***</td>
66
+
<td>***48px***</td>
67
+
<td>***32px***</td>
68
+
</tr>
69
+
</tbody>
70
+
</table>
71
+
20
72
### Best Practices
21
73
22
74
### When to use this component
@@ -32,12 +84,6 @@ Avoid using the container component if you need a flexible or dynamic layout tha
32
84
This component is not suitable for scenarios where you need to override the maximum width or margins frequently, or when the content needs to be fluid across the full width of the viewport.
33
85
If your content does not require centralised alignment or if the predefined styles conflict with the specific requirements of your design, consider using a custom container or a different layout component that offers greater flexibility.
34
86
35
-
### Classes guidelines
36
-
37
-
-`gi-layout-container`: Default container with Tailwind's container behaviour from md breakpoint.
38
-
-`gi-layout-container-max-xl`: Container capped at 1280px for optimal readability.
39
-
-`gi-layout-container-full-width`: Full-width container capped at 2xl (1536px).
0 commit comments