SIA Web Design Library

App bar

No notes defined.

<div class='r-app-bar'>
    <div class='c-action-bar'>
        <div class='c-action-bar__actions'>
            <a class='c-button c-button--small' href="#">Take action</a>
        </div>
        <div class='c-action-bar__links '>
            <a class='c-link c-link--dashboard c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">View dashboard</span></a> <a class='c-link c-link--edit c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Settings</span></a> <a class='c-link c-link--delete c-link--with-icon c-link--minimal ' href="#" itemprop="item" itemid="#"><span itemprop="name">Delete</span></a>
        </div>
    </div>
</div>
 
<div class='{{ get_component_class( 'app-bar', display, 'r' ) }}'>
    {% include get_template( 'action-bar', 'unit' ) with {
        button: button,
        links: links,
    } %} 
</div>
 
{
  "button": {
    "text": "Take action",
    "url": "#"
  },
  "links": [
    {
      "href": "#",
      "icon": "dashboard",
      "text": "View dashboard"
    },
    {
      "href": "#",
      "icon": "edit",
      "text": "Settings"
    },
    {
      "href": "#",
      "icon": "delete",
      "text": "Delete"
    }
  ]
}