Skip to content

Commit 3f0cc60

Browse files
committed
Add links to layout example and fix typos
1 parent 19fb457 commit 3f0cc60

3 files changed

Lines changed: 14 additions & 5 deletions

File tree

src/stories/Utilities/Cluster/Cluster.mdx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,16 @@ While flex utilities are great for moving quickly or for simple layouts, they ca
1616
cumbersome to manage and tend to turn into "Flex Spaghetti". In some of these cases, reaching
1717
for named components may make sense. However, there are times when a full component is more
1818
restrictive than you need and hurts productivity. Sometimes you need just a bit more structure
19-
to your layout, but not a component. Stacks provide a simple way to create readable,
19+
to your layout, but not a component. Clusters provide a simple way to create readable,
2020
flexible layouts without the overhead of a full component.
2121

2222
The cluster utility provides a simple way to create a wrapping, group of spaced items. It
2323
works with all of the gap and other flex utilities. It is effectively equivalent to using
2424
`.flex .flex-wrap .items-center .gap-md` together.
2525

26+
See [Utility Layout](?path=/docs/recipes-layout--docs#utility) for an example of how clusters
27+
can be used to create more readable flex layouts.
28+
2629
## Playground
2730

2831
<Canvas of={ClusterStories.With} />

src/stories/Utilities/Split/Split.mdx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,29 @@ While flex utilities are great for moving quickly or for simple layouts, they ca
1616
cumbersome to manage and tend to turn into "Flex Spaghetti". In some of these cases, reaching
1717
for named components may make sense. However, there are times when a full component is more
1818
restrictive than you need and hurts productivity. Sometimes you need just a bit more structure
19-
to your layout, but not a component. Stacks provide a simple way to create readable,
19+
to your layout, but not a component. Splits provide a simple way to create readable,
2020
flexible layouts without the overhead of a full component.
2121

2222
The split utility provides a simple way to push two items apart from each other.
2323
It is effectively equivalent to using `.flex .flex-wrap .items-center .justify-between .gap-md` together.
2424

25+
See [Utility Layout](?path=/docs/recipes-layout--docs#utility) for an example of how splits
26+
can be used to create more readable flex layouts.
27+
2528
## Playground
2629

2730
<Canvas of={SplitStories.With} />
2831
<Controls of={SplitStories.With} />
2932

3033
## Without
3134

32-
A normal `div` without the cluster utility
35+
A normal `div` without the split utility
3336

3437
<Canvas of={SplitStories.Without} />
3538

36-
## Cluster Property
39+
## Split Property
3740

38-
`.cluster` Creates a flex cluster.
41+
`.split` Creates a flex split.
3942

4043
<Canvas of={SplitStories.With} />
4144

src/stories/Utilities/Stack/Stack.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ The stack utility provides a simple way to create a vertical stack of spaced ite
2323
works with all of the gap and other flex utilities. It is effectively equivalent to using
2424
`.flex .flex-col .gap-md` together.
2525

26+
See [Utility Layout](?path=/docs/recipes-layout--docs#utility) for an example of how stacks
27+
can be used to create more readable flex layouts.
28+
2629
## Playground
2730

2831
<Canvas of={StackStories.With} />

0 commit comments

Comments
 (0)