Skip to content

Instantly share code, notes, and snippets.

@luptilu

luptilu/fake-legend.html

Created May 6, 2021 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save luptilu/6e806d5294ff679215b3bacc956a20e0 to your computer and use it in GitHub Desktop.
Save luptilu/6e806d5294ff679215b3bacc956a20e0 to your computer and use it in GitHub Desktop.
Download ZIP
This code lets you create a legend to paste into the Layout > Text settings in Flourish.
Raw
fake-legend.html
<div style="font-size:0.9em; margin-top: 6px;">
<div style="float: left; margin-right:10px;"><b>Category</b></div>
<div style="background-color:#2db757; float:left; width:10px; height:17px; margin-right:3px; border-radius: 3px">
</div>
<div style="margin-right:10px; float:left">Environment</div>
<div style="background-color:#750e5c; float:left; width:10px; height:17px; margin-right:3px; border-radius: 3px">
</div>
<div style="margin-right:10px; float:left">Societal</div>
<div style="background-color:#ff6d00; float:left; width:10px; height:17px; margin-right:3px; border-radius: 3px">
</div>
<div style="margin-right:10px; float:left">Technology</div>
<div style="background-color:#188ce5; float:left; width:10px; height:17px; margin-right:3px; border-radius: 3px">
</div>
<div style="margin-right:10px; float:left">Geopolitics</div>
<div style="background-color:#ff4136; float:left; width:10px; height:17px; margin-right:3px; border-radius: 3px">
</div>
<div style="margin-right:10px; float:left">Economic</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment