diff --git a/.storybook/pages/Landing.stories.mdx b/.storybook/pages/Landing.stories.mdx index 250f0b28b2..335f844be9 100644 --- a/.storybook/pages/Landing.stories.mdx +++ b/.storybook/pages/Landing.stories.mdx @@ -36,7 +36,7 @@ import { LogoOnly } from '../ui-components/LogoOnly'
GitHub Repo stars
- + diff --git a/.storybook/pages/hero.stories.mdx b/.storybook/pages/hero.stories.mdx index 873b574e66..9a6bd3bffb 100644 --- a/.storybook/pages/hero.stories.mdx +++ b/.storybook/pages/hero.stories.mdx @@ -191,7 +191,7 @@ Now the `AppBoundary` will clamp the width of your app to the `xlarge` size opti Our landing page is coming along. In the next section, we'll be building cards and add them to a responsive grid layout. - + diff --git a/.storybook/pages/introduction.stories.mdx b/.storybook/pages/introduction.stories.mdx index 44a282d2e9..80744bf7ad 100644 --- a/.storybook/pages/introduction.stories.mdx +++ b/.storybook/pages/introduction.stories.mdx @@ -68,7 +68,7 @@ If you would like to take a deeper dive into layout composition, I would recomme In the following sections, we will be using Bedrock Layout Primitives to create a landing page for a fictional company called Coco Le Belle. To make things simple, we will be using [create-react-app](https://create-react-app.dev) and `yarn`, but you should have no problem using `npm` as your package manager. In the next section we are going to learn how to install Bedrock Layout Primitives into a new project. - + diff --git a/.storybook/pages/new-arrivals.stories.mdx b/.storybook/pages/new-arrivals.stories.mdx index a1a7e49dcc..3075f712d8 100644 --- a/.storybook/pages/new-arrivals.stories.mdx +++ b/.storybook/pages/new-arrivals.stories.mdx @@ -185,7 +185,7 @@ function App() {

New Arrivals

- + {cards.map((title) => ( ))} @@ -212,7 +212,7 @@ Your browser should now show the following: />
-The above picture show the cards being optimized to the number of columns that fit the container, based on the `basis` set on the `ColumnDrop` component. When a column drops down to a new row, the precious row's column count does not impact the new row's column count. By default, it will stretch each card, but you can also set the `ColumnDrop` to have `noStretchedColumns` set to `true` to prevent this. +The above picture show the cards being optimized to the number of columns that fit the container, based on the `minItemWidth` set on the `ColumnDrop` component. When a column drops down to a new row, the precious row's column count does not impact the new row's column count. By default, it will stretch each card, but you can also set the `ColumnDrop` to have `noStretchedColumns` set to `true` to prevent this. The next option is to use the `Grid` component. So let's update our `App.js` file to use the `Grid` component. We will also need to import the `Grid` component @@ -280,7 +280,7 @@ If you are interested in contributing you can learn more about [contributing cod Thank you again for taking the time to learn more about Bedrock Layout Primitives. I hope you enjoyed it. - + diff --git a/.storybook/pages/spacing.stories.mdx b/.storybook/pages/spacing.stories.mdx index 064fef5ebf..3e2454946d 100644 --- a/.storybook/pages/spacing.stories.mdx +++ b/.storybook/pages/spacing.stories.mdx @@ -86,7 +86,7 @@ Through the remaining parts of this tutorial we will be sticking with the defaul Now that we have our first component that stacks elements in the block direction, let's start tackling the inline direction. - +