diff --git a/site/content/docs/0.0/utilities/float.md b/site/content/docs/0.0/utilities/float.md index e2e0ff7679..f0fa668928 100644 --- a/site/content/docs/0.0/utilities/float.md +++ b/site/content/docs/0.0/utilities/float.md @@ -8,4 +8,46 @@ aliases: toc: true --- -{{< callout-soon "page" >}} +## Overview + +These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items. + +{{< example >}} +
Float start on all viewport sizes

+
Float end on all viewport sizes

+
Don't float on all viewport sizes
+{{< /example >}} + + + + + +## CSS + +### Sass utilities API + +Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index df07adef22..d94838a966 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -223,7 +223,6 @@ draft: true - title: Flex - title: Float - draft: true - title: Interactions - title: Link draft: true