Pinecone

Menu Button: Inverse 

<div class="spacer"></div>
<div class="menu-button menu-button--inverse">
    <h2 class="h3 menu-button__label"><svg class="icon icon--sort" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/sort.svg#sort" />
        </svg>
        Sort by</h2>
    <ul class="link-list">
        <li class="link-list__item"><a href="/?date-added" aria-current=true>Date added</a></li>
        <li class="link-list__item"><a href="/?date-published">Date published</a></li>
        <li class="link-list__item"><a href="/?most-favorited">Most favorited</a></li>
    </ul>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<div class="menu-button{% if modifier %} menu-button--{{ modifier }}{% endif %}">
	<h2 class="h3 menu-button__label">{% if icon %}{% render '@svg', {svg: icon}, true %}{% endif %}{{ label }}</h2>
	{% render '@link-list', {items: items, standAlone: true}, true %}
</div>
 
{
  "standAlone": false,
  "label": "Sort by",
  "icon": "sort",
  "items": [
    {
      "href": "/?date-added",
      "label": "Date added",
      "current": true
    },
    {
      "href": "/?date-published",
      "label": "Date published"
    },
    {
      "href": "/?most-favorited",
      "label": "Most favorited"
    }
  ],
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.