Float

Responsively float images & quotes

Stacks Image 1798

Float stack

The Float stack allows you to float images or pull-quotes next to a block of text. You’re able to set breakpoints for when your floated image, or quote, should stop floating and get placed above your text block.
You’re able to float your image or quote to the left or the right of your text and can adjust the floated element’s margins on a per-breakpoint basis. You can also set a font size for your quote at each of the three breakpoints as well. Watch our video for the Float stack to learn how it works and how to make use of its settings.

Tutorial

Samples

Stacks Image 2772
In this example we’ve floated an image to the right-hand side of our text. As the browser shrinks the content and image will adjust to fit the display properly. We’ve opted in this example to have things break at the iPad portrait breakpoint. At that point our image will be moved to the top of our block of text. The image is made responsive so it will shrink down further to fit smaller displays as the space becomes more limited.
Stacks Image 2786
In this example we’ve floated an image to the left-hand side of our text. As the browser shrinks the content and image will adjust to fit the display properly. We’ve opted in this example to have things break at the iPad portrait breakpoint. At that point our image will be moved to the top of our block of text. The image is made responsive so it will shrink down further to fit smaller displays as the space becomes more limited.
Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.
— Steve Jobs
In this example we’ve floated a quote to the right-hand side of our text. As the browser shrinks the content and quote will adjust to fit the display properly. We’ve opted in this example to have things break at the iPad portrait breakpoint. At that point our quote will be moved to the top of our block of text. The quote is made responsive so it will shrink down further to fit smaller displays as the space becomes more limited. You can set your own font sizes for each of the three breakpoints as well.
Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.
— Steve Jobs
In this example we’ve floated a quote to the left-hand side of our text. As the browser shrinks the content and quote will adjust to fit the display properly. We’ve opted in this example to have things break at the iPad portrait breakpoint. At that point our quote will be moved to the top of our block of text. The quote is made responsive so it will shrink down further to fit smaller displays as the space becomes more limited. You can set your own font sizes for each of the three breakpoints as well.