Action Bar

Open in Figma View all action bar renders 
<div class="action-bar">
    <div>
        content
    </div>
    <div>
        content
    </div>
    <div>
        content
    </div>
</div>

Variations and modifiers

Action Bar - Two Content Slots

<div class="action-bar">
    <div>
        content
    </div>
    <div>
        content
    </div>
</div>

Action Bar - One Content Slot (Left Aligned)

<div class="action-bar action-bar--left-aligned">
    <div>
        content
    </div>
</div>

Action Bar - Two Content Slots (Left Aligned)

<div class="action-bar action-bar--left-aligned">
    <div>
        content
    </div>
    <div>
        content
    </div>
</div>

Action Bar - One Content Slot (Right Aligned)

<div class="action-bar action-bar--right-aligned">
    <div>
        content
    </div>
</div>

Action Bar - Two Content Slots (Right Aligned)

<div class="action-bar action-bar--right-aligned">
    <div>
        content
    </div>
    <div>
        content
    </div>
</div>

Action Bar - Condensed

<div class="action-bar action-bar--condensed">
    <div>
        content
    </div>
    <div>
        content
    </div>
    <div>
        content
    </div>
</div>