diff --git a/examples/web/index.html b/examples/web/index.html
index 56f790b56f..1af8729cae 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -30,14 +30,8 @@
header,
main {
- padding: 1.5rem 8vw;
- }
-
- @media (min-width: 960px) {
- header,
- main {
- padding-inline: 16vw;
- }
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
header {
@@ -47,29 +41,35 @@
- Spirit Web Demo
+
+
Spirit Web Demo
+
- Button
-
-
-
+
+
Button
+
+
+
+
- Tag
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
+
+
Tag
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+
diff --git a/examples/web/jobs.html b/examples/web/jobs.html
index de668e7b1e..24718de353 100644
--- a/examples/web/jobs.html
+++ b/examples/web/jobs.html
@@ -42,14 +42,8 @@
header,
main {
- padding: 1.5rem 8vw;
- }
-
- @media (min-width: 960px) {
- header,
- main {
- padding-inline: 16vw;
- }
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
header {
@@ -60,29 +54,35 @@
- Button
-
-
-
+
+
Button
+
+
+
+
- Tag
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
- I'm tag. I feel like filling marketing pages :-)
+
+
Tag
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+ I'm tag. I feel like filling marketing pages :-)
+
diff --git a/packages/design-tokens/src/scss/_breakpoints.scss b/packages/design-tokens/src/scss/_breakpoints.scss
index 5f25b6bd4b..88f28c120e 100644
--- a/packages/design-tokens/src/scss/_breakpoints.scss
+++ b/packages/design-tokens/src/scss/_breakpoints.scss
@@ -1,7 +1,9 @@
+$breakpoint-mobile: 0;
$breakpoint-tablet: 48em !default; // 768px
$breakpoint-desktop: 80em !default; // 1280px
$breakpoints: (
+ mobile: $breakpoint-mobile,
tablet: $breakpoint-tablet,
desktop: $breakpoint-desktop,
) !default;
diff --git a/packages/design-tokens/src/scss/_layout.scss b/packages/design-tokens/src/scss/_layout.scss
new file mode 100644
index 0000000000..a3759f0c7a
--- /dev/null
+++ b/packages/design-tokens/src/scss/_layout.scss
@@ -0,0 +1,13 @@
+@use 'spacing';
+
+$grid-padding-mobile: spacing.$space-6 !default;
+$grid-padding-tablet: spacing.$space-8 !default;
+$grid-padding-desktop: spacing.$space-8 !default;
+
+$grid-paddings: (
+ mobile: $grid-padding-mobile,
+ tablet: $grid-padding-tablet,
+ desktop: $grid-padding-desktop,
+) !default;
+
+$container-width: 80rem !default;
diff --git a/packages/design-tokens/src/scss/index.scss b/packages/design-tokens/src/scss/index.scss
index fcdf842bae..f0e50719ea 100644
--- a/packages/design-tokens/src/scss/index.scss
+++ b/packages/design-tokens/src/scss/index.scss
@@ -1,6 +1,7 @@
@forward 'borders';
@forward 'breakpoints';
@forward 'colors';
+@forward 'layout';
@forward 'radii';
@forward 'shadows';
@forward 'spacing';
diff --git a/packages/web/src/components/Container/README.md b/packages/web/src/components/Container/README.md
new file mode 100644
index 0000000000..4305900717
--- /dev/null
+++ b/packages/web/src/components/Container/README.md
@@ -0,0 +1,11 @@
+# Container
+
+Container centers your content horizontally and sets its max-width with horizontal paddings.
+
+```html
+Content
+```
+
+## Theming
+
+Container variables `max-width`, `paddings` and `breakpoints` are mapped to design tokens.
diff --git a/packages/web/src/components/Container/_Container.scss b/packages/web/src/components/Container/_Container.scss
new file mode 100644
index 0000000000..5501e643ad
--- /dev/null
+++ b/packages/web/src/components/Container/_Container.scss
@@ -0,0 +1,12 @@
+@use 'theme';
+@use 'tools';
+
+.Container {
+ width: 100%;
+ max-width: theme.$max-width;
+ margin-right: auto;
+ margin-left: auto;
+ box-sizing: border-box;
+
+ @include tools.paddings(theme.$paddings, theme.$breakpoints);
+}
diff --git a/packages/web/src/components/Container/_theme.scss b/packages/web/src/components/Container/_theme.scss
new file mode 100644
index 0000000000..1205a3bab7
--- /dev/null
+++ b/packages/web/src/components/Container/_theme.scss
@@ -0,0 +1,5 @@
+@use '@tokens' as tokens;
+
+$max-width: tokens.$container-width;
+$paddings: tokens.$grid-paddings;
+$breakpoints: tokens.$breakpoints;
diff --git a/packages/web/src/components/Container/_tools.scss b/packages/web/src/components/Container/_tools.scss
new file mode 100644
index 0000000000..ac7bfa6dbf
--- /dev/null
+++ b/packages/web/src/components/Container/_tools.scss
@@ -0,0 +1,12 @@
+@use '../../tools/breakpoint';
+@use 'sass:map';
+@use '@tokens' as tokens;
+
+@mixin paddings($paddings, $breakpoints) {
+ @each $name, $breakpoint in $breakpoints {
+ @include breakpoint.up($breakpoint) {
+ padding-right: map.get($paddings, $name);
+ padding-left: map.get($paddings, $name);
+ }
+ }
+}
diff --git a/packages/web/src/components/Container/index.scss b/packages/web/src/components/Container/index.scss
new file mode 100644
index 0000000000..678f650fd3
--- /dev/null
+++ b/packages/web/src/components/Container/index.scss
@@ -0,0 +1 @@
+@forward 'Container';
diff --git a/packages/web/src/components/Tag/README.md b/packages/web/src/components/Tag/README.md
index 2fddc917cd..040442374b 100644
--- a/packages/web/src/components/Tag/README.md
+++ b/packages/web/src/components/Tag/README.md
@@ -19,16 +19,16 @@ Available variants are:
- danger-dark
```html
-Discount
-Discount
-Discount
-Discount
-Discount
-Discount
-Discount
-Discount
-Discount
-Discount
+Discount
+Discount
+Discount
+Discount
+Discount
+Discount
+Discount
+Discount
+Discount
+Discount
```
## Theming
diff --git a/packages/web/src/components/index.scss b/packages/web/src/components/index.scss
index 308170a1e4..1aaf4bfb88 100644
--- a/packages/web/src/components/index.scss
+++ b/packages/web/src/components/index.scss
@@ -1,2 +1,3 @@
@forward 'Button';
+@forward 'Container';
@forward 'Tag';
diff --git a/packages/web/src/tools/_breakpoint.scss b/packages/web/src/tools/_breakpoint.scss
new file mode 100644
index 0000000000..bf91067777
--- /dev/null
+++ b/packages/web/src/tools/_breakpoint.scss
@@ -0,0 +1,9 @@
+@mixin up($breakpointValue) {
+ @if $breakpointValue > 0 {
+ @media (min-width: $breakpointValue) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}