<div class="card-view-sort">
<strong>Sort by:</strong>
<a href="#">Producer</a>
<a href="#">Wine name</a>
<a href="#">Vintage</a>
<a href="#">Country <svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sort-asc" />
</svg>
</a>
<a href="#">Region</a>
<a href="#">Colour</a>
<a href="#">Bottles</a>
<a href="#">Purchase price</a>
<a href="#">Market price</a>
<a href="#">Total price</a>
<a href="#">Total market price</a>
<a href="#">Mark up/btl</a>
</div>
<div class="card-view-sort">
<strong>Sort by:</strong>
<a href="#">Producer</a>
<a href="#">Wine name</a>
<a href="#">Vintage</a>
<a href="#">Country {{>@svg icon="sort-asc"}}</a>
<a href="#">Region</a>
<a href="#">Colour</a>
<a href="#">Bottles</a>
<a href="#">Purchase price</a>
<a href="#">Market price</a>
<a href="#">Total price</a>
<a href="#">Total market price</a>
<a href="#">Mark up/btl</a>
</div>
/* No context defined. */
/**
* Card view sorting
*/
@media screen {
.card-view-sort {
background-color: var(--dark-grey);
color: var(--text-inverted);
padding: 0.1em 0.5em;
display: flex;
}
.card-view-sort a {
margin: 0 0 0 1em;
color: currentColor;
text-decoration: none;
}
.card-view-sort a:hover,
.card-view-sort a:focus,
.card-view-sort a:active {
text-decoration: underline;
}
.card-view-sort a .icon {
margin-left: -0.35em;
}
}
Used on any view using cards in a grid view, wherein there’s a need to sort by different parameters.