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).