diff --git a/.changeset/shy-cats-hug.md b/.changeset/shy-cats-hug.md new file mode 100644 index 0000000000..50b8fee6a2 --- /dev/null +++ b/.changeset/shy-cats-hug.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Add width utility to limit line length for readability diff --git a/docs/content/utilities/layout.md b/docs/content/utilities/layout.md index d941802f69..be98f26a72 100644 --- a/docs/content/utilities/layout.md +++ b/docs/content/utilities/layout.md @@ -204,6 +204,14 @@ Use `.width-auto` to reset width to `auto` (initial value). Typically used with ``` +Use `.width-comfortable` to set width to `65ch`. This can be used on text elements to shorten the line length for better readability. + +```html live +

+ Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong. +

+``` + Use `.height-fit` to set max-height 100%. ```html live diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss index 6837b9a94c..7b6e963565 100644 --- a/src/utilities/layout.scss +++ b/src/utilities/layout.scss @@ -71,13 +71,15 @@ // Width and height utilities, helpful in combination // with display-table utilities and images /* Max width 100% */ -.width-fit { max-width: 100% !important; } +.width-fit { max-width: 100% !important; } /* Set the width to 100% */ -.width-full { width: 100% !important; } +.width-full { width: 100% !important; } +/* Set the max-width to 65 characters */ +.width-comfortable { max-width: 65ch !important; } /* Max height 100% */ -.height-fit { max-height: 100% !important; } +.height-fit { max-height: 100% !important; } /* Set the height to 100% */ -.height-full { height: 100% !important; } +.height-full { height: 100% !important; } /* Remove min-width from element */ .min-width-0 { min-width: 0 !important; }