spoko-design-system 0.8.0 → 0.8.1

package/src/pages/components/quote.mdx

@@ -1,33 +1,33 @@
----
-title: "Quote"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import Quote from '../../components/Quote.vue'
-
-
-# Quote
-
-Simple Quote component with left border in primary color.
-
-<div class="component-preview">
-    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-</div>
-
-
-```html
-<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-```
-
-#
-
-
-<div class="component-preview">
-    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-</div>
-
-
-```html
-<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
-```
+---
+title: "Quote"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Quote from '../../components/Quote.vue'
+
+
+# Quote
+
+Simple Quote component with left border in primary color.
+
+<div class="component-preview">
+    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```
+
+#
+
+
+<div class="component-preview">
+    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```

package/src/pages/components/slimbanner.mdx

@@ -1,35 +1,35 @@
----
-title: "SlimBanner"
-layout: "../../layouts/MainLayout.astro"
----
-import SlimBanner from '../../components/SlimBanner.vue'
-
-# SlimBanner
-
-SlimBanner - solidarity with Ukraine.
-
-<div class="component-preview">
-  <SlimBanner
-    class="w-full drop-shadow"
-    client:load
-    showCloseButton
-    transition:name="slim-banner"
-    transition:persist
-    
-  />
-</div>
-
-```js
-<SlimBanner
-  class="w-full drop-shadow"
-  client:load
-  showCloseButton
-  transition:name="slim-banner"
-  transition:persist
-/>
-```
-
-## uno.config.ts / shortcuts
-```js
-['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],
-```
+---
+title: "SlimBanner"
+layout: "../../layouts/MainLayout.astro"
+---
+import SlimBanner from '../../components/SlimBanner.vue'
+
+# SlimBanner
+
+SlimBanner - solidarity with Ukraine.
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    showCloseButton
+    transition:name="slim-banner"
+    transition:persist
+    
+  />
+</div>
+
+```js
+<SlimBanner
+  class="w-full drop-shadow"
+  client:load
+  showCloseButton
+  transition:name="slim-banner"
+  transition:persist
+/>
+```
+
+## uno.config.ts / shortcuts
+```js
+['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],
+```

package/src/pages/components/table.mdx

@@ -1,109 +1,109 @@
----
-title: "Table"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import Table from '../../components/Table.vue'
-export const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-export const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-# Table
-
-Simple table based on JSON data object.
-
-<div class="component-preview">
-    <Table data={tableData}></Table>
-</div>
-
-## Code
-
-```ts
-const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-```
-
-```html
-  <!-- Astro -->
-  <Table data={tableData} />
-
-  <!-- Vue -->
-  <Table :data="tableData" />
-```
-
-
-
-# Table
-
-<div class="component-preview">
-    <Table data={tableDataSecondary} />
-</div>
-
-## Code
-
-```ts
-const tableDataSecondary = [
-  {
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-
-
-<Table data={tableDataSecondary} />
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Table from '../../components/Table.vue'
+export const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+export const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+# Table
+
+Simple table based on JSON data object.
+
+<div class="component-preview">
+    <Table data={tableData}></Table>
+</div>
+
+## Code
+
+```ts
+const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+```
+
+```html
+  <!-- Astro -->
+  <Table data={tableData} />
+
+  <!-- Vue -->
+  <Table :data="tableData" />
+```
+
+
+
+# Table
+
+<div class="component-preview">
+    <Table data={tableDataSecondary} />
+</div>
+
+## Code
+
+```ts
+const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+<Table data={tableDataSecondary} />
 ```

package/src/pages/core/colors.mdx

@@ -1,10 +1,10 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import MainColors from '../../components/MainColors.vue';
-
-<h1>Colors</h1>
-<p>Base colors.</p>
-
-<MainColors class="mt-8" />
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<p>Base colors.</p>
+
+<MainColors class="mt-8" />

package/src/pages/core/grid.mdx

@@ -1,89 +1,89 @@
----
-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>
-```
+---
+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>
+```