Actions — Views UI

Details: Lauren Collier

The actions UI and title area.

Custom actions icons (see markup example below for example usage):

vws-i-cog/ vws-i-settings
vws-i-download/ vws-i-archive
vws-i-upload/ vws-i-unarchive
vws-i-edit/ vws-i-write
vws-i-email/ vws-i-mail
vws-i-person/ vws-i-user
vws-i-plus
vws-i-print
vws-i-trash
vws-i-usergroup
vws-i-view

Example markup:

<div class="vws-c-ui-header">
    <h2 class="vws-c-ui-header__heading">
        <span class="vws-c-ui-header__heading-label">Details:</span> Lauren Collier
    </h2>

    <div class="vws-c-ui-header__ui vws-c-actions">
        <span id="page-actions-dropdown" class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="vws-actions-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="vws-actions-menu">
                <li class=""><a href="">Edit</a></li>
                <li class=""><a href="">PDF</a></li>
                <li class=""><a href="">Register on Session Group</a></li>
                <li class=""><a href="">Archive</a></li>
                <li class=""><a href="">Delete</a></li>
            </ul>
        </span>

        <a href="" class="btn btn-primary"><span class="vws-i-edit"></span></a>
        <a href="" class="btn btn-primary"><span class="vws-i-view"></span></a>
        <a href="" class="btn btn-primary"><span class="vws-i-download"></span></a>
    </div>
</div>