diff --git a/.changeset/strange-toys-bake.md b/.changeset/strange-toys-bake.md index e7da94a50..7faf7f5fc 100644 --- a/.changeset/strange-toys-bake.md +++ b/.changeset/strange-toys-bake.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Add `u-inline-block` utility +Add `u-rescue-orphan` utility to fine-tune where text breaks occur as space allows diff --git a/src/utilities/display/demo/inline-block.twig b/src/utilities/display/demo/inline-block.twig deleted file mode 100644 index a03e54d12..000000000 --- a/src/utilities/display/demo/inline-block.twig +++ /dev/null @@ -1,3 +0,0 @@ -
- Look how the last two words stay together -
diff --git a/src/utilities/display/demo/rescue-orphan.twig b/src/utilities/display/demo/rescue-orphan.twig new file mode 100644 index 000000000..f49038010 --- /dev/null +++ b/src/utilities/display/demo/rescue-orphan.twig @@ -0,0 +1,5 @@ +
+ + Look how the last two words stay together + +
diff --git a/src/utilities/display/display.scss b/src/utilities/display/display.scss index df082f627..de483779c 100644 --- a/src/utilities/display/display.scss +++ b/src/utilities/display/display.scss @@ -13,7 +13,8 @@ display: block; } -/// Set `display` to `inline-block` -.u-inline-block { +/// Attempt to keep chunks of text together as space allows +.u-rescue-orphan { display: inline-block; + text-decoration: inherit; } diff --git a/src/utilities/display/display.stories.mdx b/src/utilities/display/display.stories.mdx index 364f6be27..dd5543247 100644 --- a/src/utilities/display/display.stories.mdx +++ b/src/utilities/display/display.stories.mdx @@ -1,7 +1,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import hiddenVisuallyDemo from './demo/hidden-visually.twig'; import clearfixDemo from './demo/clearfix.twig'; -import inlineBlockDemo from './demo/inline-block.twig'; +import rescueOrphanDemo from './demo/rescue-orphan.twig'; @@ -32,10 +32,10 @@ The `u-clearfix` class forces a container to expand to fit floated children. {clearfixDemo} -## Inline Block +## Rescue Orphan -The `u-inline-block` class sets the `display` property to `inline-block`. This can be used to discourage inline elements from breaking across multiple lines. +The `u-rescue-orphan` class can wrap the last few words of a chunk of text, attempting to keep them together unless space limitations force a break. This can help reduce the chance of [a typographic orphan](https://en.wikipedia.org/wiki/Widows_and_orphans) in some situations. - {inlineBlockDemo} + {rescueOrphanDemo}