Float

A left or right "floated" piece of content
​
👁️
PREVIEW​
A piece of floating content that the main page content will flow around. Useful for putting a figure to the side in a long page of paragraphs.
{% capture content %}
{% include figure.html ... %}
{% endcapture %}
​
{%
include float.html
content=content
flip=true
%}
​
Several paragraphs of text.
​
{% include float.html clear=true %}
Parameter
Description
Default
content
​Arbitrary content to flow around.
​
flip
Whether to flip side of page content floats to.
false (floats to left)
clear
Set to true to "stop" the current float, i.e. content after this will no longer flow around the previous float component, and will instead go below it.
​
In general, you shouldn't need the clear parameter, because you should be using this component when the content flowing around is much taller/longer than the floating content (thus the floating content will never push and interfere with undesired things like headings). If you need two roughly equal height things next to each other, you can use the cols or even the feature component instead (as long as you're okay with equal width).
Last modified 11mo ago