There are no notes for this item.
<div class="palette">
<div class="palette__left">
<span class="icon__view-list"></span>
<span class="sr-only">
view-list
</span>
</div>
<div class="palette__right">
<p class="body-small">Name</p>
<p class="body-small">Definition</p>
<p class="body-small">Metaphor</p>
</div>
</div>
/*------------------------------------*\
#ICONS
\*------------------------------------*/
// For now here just the default state of the icons. Probably makes sense to edit the config file to show the different states and therefore have all the icons in this file
.icon__view-list {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-list%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-list%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C3%20L20%2C3%20L20%2C5%20L0%2C5%20L0%2C3%20Z%20M0%2C7%20L20%2C7%20L20%2C9%20L0%2C9%20L0%2C7%20Z%20M0%2C11%20L20%2C11%20L20%2C13%20L0%2C13%20L0%2C11%20Z%20M0%2C15%20L20%2C15%20L20%2C17%20L0%2C17%20L0%2C15%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px;
}
.icon__view-tile {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%203.7.2%20%2828276%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-tile%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-tile%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0%20L9%2C0%20L9%2C9%20L0%2C9%20L0%2C0%20Z%20M2%2C2%20L7%2C2%20L7%2C7%20L2%2C7%20L2%2C2%20Z%20M0%2C11%20L9%2C11%20L9%2C20%20L0%2C20%20L0%2C11%20Z%20M2%2C13%20L7%2C13%20L7%2C18%20L2%2C18%20L2%2C13%20Z%20M11%2C0%20L20%2C0%20L20%2C9%20L11%2C9%20L11%2C0%20Z%20M13%2C2%20L18%2C2%20L18%2C7%20L13%2C7%20L13%2C2%20Z%20M11%2C11%20L20%2C11%20L20%2C20%20L11%2C20%20L11%2C11%20Z%20M13%2C13%20L18%2C13%20L18%2C18%20L13%2C18%20L13%2C13%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px;
}
.icon__view-column {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2220px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2020%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eview-column%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22view-column%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%226%202%208%202%208%2014%206%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Combined-Shape-path%22%20points%3D%2212%202%2014%202%2014%2014%2012%2014%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-2%22%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20x%3D%2218%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2212%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20x%3D%220%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%222%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
background-repeat: no-repeat;
display: block;
background-size: 16px 16px;
width: 16px;
height: 16px;
}
.icon__info {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2042%20%2836781%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Einformation-solid%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23626469%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22information-solid%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2C2%20C5%2C1.44771525%205.44386482%2C1%206%2C1%20C6.55228475%2C1%207%2C1.44386482%207%2C2%20C7%2C2.55228475%206.55613518%2C3%206%2C3%20C5.44771525%2C3%205%2C2.55613518%205%2C2%20Z%20M5%2C5.00292933%20C5%2C4.44902676%205.44386482%2C4%206%2C4%20C6.55228475%2C4%207%2C4.43788135%207%2C5.00292933%20L7%2C9.99707067%20C7%2C10.5509732%206.55613518%2C11%206%2C11%20C5.44771525%2C11%205%2C10.5621186%205%2C9.99707067%20L5%2C5.00292933%20Z%20M1.75735932%2C10.2426407%20C4.10050507%2C12.5857864%207.89949495%2C12.5857864%2010.2426407%2C10.2426407%20C12.5857864%2C7.89949495%2012.5857864%2C4.10050507%2010.2426407%2C1.75735932%20C7.89949495%2C-0.585786439%204.10050507%2C-0.585786439%201.75735932%2C1.75735932%20C-0.585786439%2C4.10050507%20-0.585786439%2C7.89949495%201.75735932%2C10.2426407%20Z%22%20id%3D%22Combined-Shape%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
background-repeat: no-repeat;
display: block;
background-size: 12px 12px;
width: 12px;
height: 12px;
}