spoko-design-system 1.18.1 → 1.20.0

package/src/pages/core/grid.mdx

@@ -1,193 +1,193 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-# Grid
-
-Grid templates for articles, special sections, call to action etc.
-
-
-## No more container:
-Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
-<div class="component-preview" style="display: block">
-<main class="flow content-grid text-xl bg-white pt-8">
-  <h1 class='article-title'>Content without containers</h1>
-  <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.</p>
-  <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
-  <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.</p>
-  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
-
-  <section class="full-width bg-primary text-white section-padding flow">
-    <h2>This section has a different background-color</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
-    <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
-  </section>
-
-  <h2>Back to normal</h2>
-  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
-  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
-  <p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
-  <p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
-  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
-  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
-  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
-  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
-  <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
-  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
-  <h3>Images as full-bleed works too</h3>
-  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
-  <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
-
-  <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate  voluptas natus corporis.</p>
-  <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
-  <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam
-    voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
-  <section class="bg-primary text-white full-width">
-    <h3>content</h3>
-  </section>
-</main>
-</div>
-
-### Code
-
-```html
-<main class="flow content-grid text-xl bg-white pt-8">
-  <h1 class='article-title'>Content without containers</h1>
-  <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.</p>
-  <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
-  <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.</p>
-  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
-
-  <section class="full-width bg-primary text-white section-padding flow">
-    <h2>This section has a different background-color</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
-    <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
-  </section>
-
-  <h2>Back to normal</h2>
-  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
-  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
-  <p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
-  <p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
-  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
-  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
-  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
-  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
-  <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
-  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
-  <h3>Images as full-bleed works too</h3>
-  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
-  <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
-
-  <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.</p>
-  <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
-  <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
-  <section class="bg-primary text-white full-width">
-    <h3>content</h3>
-  </section>
-</main>
-```
-
-## Full-width variants
-
-Additional utility classes for more flexible full-width layouts.
-
-### Full-width with Flexbox
-
-Use `.full-width-flex` when you need flexbox layout across the full width instead of grid.
-
-<div class="component-preview" style="display: block">
-<main class="flow content-grid bg-white pt-8">
-  <h2>Full-width Flexbox Example</h2>
-  <p>The section below uses flexbox for horizontal layout across the full width.</p>
-
-  <section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
-    <div class="text-center">
-      <h3 class="text-2xl font-bold">Feature 1</h3>
-      <p>Flexbox layout</p>
-    </div>
-    <div class="text-center">
-      <h3 class="text-2xl font-bold">Feature 2</h3>
-      <p>Full width span</p>
-    </div>
-    <div class="text-center">
-      <h3 class="text-2xl font-bold">Feature 3</h3>
-      <p>Easy alignment</p>
-    </div>
-  </section>
-
-  <p>Back to regular content width.</p>
-</main>
-</div>
-
-```html
-<section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
-  <div class="text-center">
-    <h3 class="text-2xl font-bold">Feature 1</h3>
-    <p>Flexbox layout</p>
-  </div>
-  <div class="text-center">
-    <h3 class="text-2xl font-bold">Feature 2</h3>
-    <p>Full width span</p>
-  </div>
-  <div class="text-center">
-    <h3 class="text-2xl font-bold">Feature 3</h3>
-    <p>Easy alignment</p>
-  </div>
-</section>
-```
-
-### Full-width Uncontained
-
-Use `.full-width-uncontained` when you want a full-width section where children also span the full width (not constrained to content area).
-
-<div class="component-preview" style="display: block">
-<main class="flow content-grid bg-white pt-8">
-  <h2>Full-width Uncontained Example</h2>
-  <p>The section below has a full-width background and its children span the full width too.</p>
-
-  <section class="full-width-uncontained bg-gray-100 section-padding">
-    <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
-    <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
-  </section>
-
-  <p>Back to regular content width.</p>
-</main>
-</div>
-
-```html
-<section class="full-width-uncontained bg-gray-100 section-padding">
-  <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
-  <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
-</section>
-```
-
-### Full-width Block
-
-Use `.full-width-block` for simple block-level full-width containers without grid or flex layout.
-
-<div class="component-preview" style="display: block">
-<main class="flow content-grid bg-white pt-8">
-  <h2>Full-width Block Example</h2>
-  <p>The image below is wrapped in a full-width-block container.</p>
-
-  <div class="full-width-block bg-gray-200">
-    <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
-  </div>
-
-  <p>Back to regular content width.</p>
-</main>
-</div>
-
-```html
-<div class="full-width-block bg-gray-200">
-  <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
-</div>
-```
-
-### Comparison
-
-- **`.full-width`** - Grid layout with children constrained to content area (default behavior)
-- **`.full-width-flex`** - Flexbox layout across full width
-- **`.full-width-uncontained`** - Grid layout with children spanning full width
-- **`.full-width-block`** - Simple block container at full width
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+# Grid
+
+Grid templates for articles, special sections, call to action etc.
+
+
+## No more container:
+Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
+<div class="component-preview" style="display: block">
+<main class="flow content-grid text-xl bg-white pt-8">
+  <h1 class='article-title'>Content without containers</h1>
+  <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.</p>
+  <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
+  <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.</p>
+  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
+
+  <section class="full-width bg-primary text-white section-padding flow">
+    <h2>This section has a different background-color</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
+    <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
+  </section>
+
+  <h2>Back to normal</h2>
+  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
+  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
+  <p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
+  <p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
+  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
+  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
+  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
+  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
+  <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
+  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
+  <h3>Images as full-bleed works too</h3>
+  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
+  <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
+
+  <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate  voluptas natus corporis.</p>
+  <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
+  <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam
+    voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
+  <section class="bg-primary text-white full-width">
+    <h3>content</h3>
+  </section>
+</main>
+</div>
+
+### Code
+
+```html
+<main class="flow content-grid text-xl bg-white pt-8">
+  <h1 class='article-title'>Content without containers</h1>
+  <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.</p>
+  <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
+  <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.</p>
+  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>
+
+  <section class="full-width bg-primary text-white section-padding flow">
+    <h2>This section has a different background-color</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum nobis maiores doloremque, nostrum deleniti!</p>
+    <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium ex alias?</p>
+  </section>
+
+  <h2>Back to normal</h2>
+  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestia searum officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
+  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
+  <p>Adipisicing non est incididunt ipsum eiusmod enim ullamco esse incididunt nisi id excepteur. Aliquip veniam occaecat sunt do ullamco voluptate. Incididunt dolore deserunt tempor eu amet ut reprehenderit ex ipsum. Irure minim commodo irure elit. Dolore culpa in est veniam labore voluptate ut ut Lorem aute culpa ullamco incididunt. Ipsum adipisicing irure do ut deserunt deserunt.</p>
+  <p class='breakout call-to-action border-l-4 border-blue-400 text-2xl font-headlight'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
+  <p>Dolore velit anim occaecat tempor duis minim consectetur eu in aute esse reprehenderit aliquip. Pariatur reprehenderit et velit Lorem. Laboris minim consectetur Lorem voluptate sint nisi eu esse occaecat adipisicing mollit Lorem consequat ullamco. Dolore commodo officia deserunt consectetur ad incididunt nisi laborum duis.</p>
+  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
+  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
+  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
+  <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
+  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
+  <h3>Images as full-bleed works too</h3>
+  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
+  <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>
+
+  <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.</p>
+  <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
+  <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>
+  <section class="bg-primary text-white full-width">
+    <h3>content</h3>
+  </section>
+</main>
+```
+
+## Full-width variants
+
+Additional utility classes for more flexible full-width layouts.
+
+### Full-width with Flexbox
+
+Use `.full-width-flex` when you need flexbox layout across the full width instead of grid.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Flexbox Example</h2>
+  <p>The section below uses flexbox for horizontal layout across the full width.</p>
+
+  <section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 1</h3>
+      <p>Flexbox layout</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 2</h3>
+      <p>Full width span</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 3</h3>
+      <p>Easy alignment</p>
+    </div>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 1</h3>
+    <p>Flexbox layout</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 2</h3>
+    <p>Full width span</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 3</h3>
+    <p>Easy alignment</p>
+  </div>
+</section>
+```
+
+### Full-width Uncontained
+
+Use `.full-width-uncontained` when you want a full-width section where children also span the full width (not constrained to content area).
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Uncontained Example</h2>
+  <p>The section below has a full-width background and its children span the full width too.</p>
+
+  <section class="full-width-uncontained bg-gray-100 section-padding">
+    <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+    <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-uncontained bg-gray-100 section-padding">
+  <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+  <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+</section>
+```
+
+### Full-width Block
+
+Use `.full-width-block` for simple block-level full-width containers without grid or flex layout.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Block Example</h2>
+  <p>The image below is wrapped in a full-width-block container.</p>
+
+  <div class="full-width-block bg-gray-200">
+    <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+  </div>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<div class="full-width-block bg-gray-200">
+  <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+</div>
+```
+
+### Comparison
+
+- **`.full-width`** - Grid layout with children constrained to content area (default behavior)
+- **`.full-width-flex`** - Flexbox layout across full width
+- **`.full-width-uncontained`** - Grid layout with children spanning full width
+- **`.full-width-block`** - Simple block container at full width

package/src/pages/core/introduction.mdx

@@ -1,77 +1,77 @@
----
-title: Introduction
-description: Docs intro
-layout: ../../layouts/MainLayout.astro
----
-import Button from '../../components/Button.vue'
-
-# Spoko Design System Theme
-
-SDS is the easiest way to start with some my websites. 
-Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
-
-The project was inspired by the Astroship starter and Astro Design System Theme (the latter is currently not developed, nor is it responsive, but the nice organization in the configuration files appealed to me a lot).
-
-It's still in the development phase, use at your own risk ;-)
-
-
-## Getting started
-
-### Adding new sections
-
-Although it's not required, you can create folders for new sections.
-
-To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
-#
-
-Example:
-
-```js
-export const SIDEBAR = [
-    { text: "Core", header: true },
-    { text: "Introduction", link: "/core/introduction" },
-    ...,
-    { text: "Components", header: true },
-    { text: "Buttons", link: "/components/buttons" },
-    ...,
-    { text: "New section", header: true },
-    { text: "New component", link: "/new-section/new-component.md" },
-];
-```
-
-### Adding new pages
-
-To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
-
-You're free to organize the pages however you want.
-
-### Customizing Core section (colors, typography, shadows...)
-
-If you want to customize the default colors, typography or shadows you can find the configuration file at `uno-config`. I think I have prepared enough shades of blue ;-) 
-
-Feel free to add new pages to the Core section
-
-### Customizing the page layout
-
-You can find the css for the pages in `src/styles/content.css`.
-
-### Adding mew components
-
-Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
-
-To get started check how the `Button` component is used in the `src/pages/buttons.mdx` file.
-
-You can import your component library or create your own and document it easily.
-
-
-### `.component-preview` utility
-
-There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
-
-<div class="component-preview">
-    <Button primary rounded>Your component</Button>
-</div>
-
-### Have fun!
-
-Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.
+---
+title: Introduction
+description: Docs intro
+layout: ../../layouts/MainLayout.astro
+---
+import Button from '../../components/Button.vue'
+
+# Spoko Design System Theme
+
+SDS is the easiest way to start with some my websites. 
+Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
+
+The project was inspired by the Astroship starter and Astro Design System Theme (the latter is currently not developed, nor is it responsive, but the nice organization in the configuration files appealed to me a lot).
+
+It's still in the development phase, use at your own risk ;-)
+
+
+## Getting started
+
+### Adding new sections
+
+Although it's not required, you can create folders for new sections.
+
+To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
+#
+
+Example:
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/buttons" },
+    ...,
+    { text: "New section", header: true },
+    { text: "New component", link: "/new-section/new-component.md" },
+];
+```
+
+### Adding new pages
+
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+
+You're free to organize the pages however you want.
+
+### Customizing Core section (colors, typography, shadows...)
+
+If you want to customize the default colors, typography or shadows you can find the configuration file at `uno-config`. I think I have prepared enough shades of blue ;-) 
+
+Feel free to add new pages to the Core section
+
+### Customizing the page layout
+
+You can find the css for the pages in `src/styles/content.css`.
+
+### Adding mew components
+
+Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
+
+To get started check how the `Button` component is used in the `src/pages/buttons.mdx` file.
+
+You can import your component library or create your own and document it easily.
+
+
+### `.component-preview` utility
+
+There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
+
+<div class="component-preview">
+    <Button primary rounded>Your component</Button>
+</div>
+
+### Have fun!
+
+Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.