Title Bar

Open in Figma View all title bar renders 
<div class="title-bar">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
    </div>
    <div class="title-bar__dismiss">
        <button class="btn btn--text"
                aria-label="Dismiss">
            <span>
                 <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </span>
        </button>
    </div>
</div>

Variations and modifiers

Title Bar - Centered

<div class="title-bar title-bar--center">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
    </div>
    <div class="title-bar__dismiss">
        <button class="btn btn--text"
                aria-label="Dismiss">
            <span>
                 <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </span>
        </button>
    </div>
</div>

Title Bar Content Only - Centered

<div class="title-bar title-bar--center">
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
    </div>
</div>

Title Bar With No Dismiss

<div class="title-bar">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
    </div>
</div>

Title Bar With Content Slot

Where a title bar requires an additional content item beyond the standard icon, title or dismiss button can be included by wrapping the content item in a title-bar__content container. 

<div class="title-bar title-bar--content-slot">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
        <div class="title-bar__content-slot content-slot">
            content slot
        </div>
    </div>
    <div class="title-bar__dismiss">
        <button class="btn btn--text"
                aria-label="Dismiss">
            <span>
                 <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </span>
        </button>
    </div>
</div>

Title Bar Title Only

<div class="title-bar">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
    </div>
</div>

Title Bar With Content Slot - Centered

<div class="title-bar title-bar--center">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
        <div class="title-bar__content-slot content-slot">
            content slot
        </div>
    </div>
    <div class="title-bar__dismiss">
        <button class="btn btn--text"
                aria-label="Dismiss">
            <span>
                 <span class="material-symbols-rounded" aria-hidden="true">close</span>
            </span>
        </button>
    </div>
</div>

Title Bar With Content Slot and No Dismiss - Centered

<div class="title-bar title-bar--center">
    <div class="title-bar__icon">
        <span class="material-symbols-rounded" aria-hidden="true">help</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading">
            Card title
        </div>
        <div class="title-bar__content-slot content-slot">
            content slot
        </div>
    </div>
</div>

Title Bar With an Icon on the Left and Right

A 'Context' parameter may need to be added to IconRight to remove an ambiguity error in Blazor (included in example). An Icon atom must be passed to 'IconRight' parameter if it is to be used. It will be displayed instead of the dismiss button. 

<div class="title-bar" data-testid="titlebar">
    <div class="title-bar__icon" data-testid="titlebar-icon">
        <span class="material-symbols-rounded" aria-hidden="true">key_vertical</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
    </div>
    <div class="title-bar__icon-right">
        <span class="material-symbols-rounded" aria-hidden="true">add_circle</span>
    </div>
</div>

Title Bar With an Icon on the Right Only

A 'Context' parameter may need to be added to IconRight to remove an ambiguity error in Blazor (included in example). An Icon atom must be passed to 'IconRight' parameter if it is to be used. It will be displayed instead of the dismiss button. 

<div class="title-bar" data-testid="titlebar">
    <div class="title-bar__content">
        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
    </div>
    <div class="title-bar__icon-right">
        <span class="material-symbols-rounded" aria-hidden="true">add_circle</span>
    </div>
</div>

Title Bar With an Icon on the Left and Right and a Content Slot

A 'Context' parameter may need to be added to IconRight to remove an ambiguity error in Blazor (included in example). An Icon atom must be passed to 'IconRight' parameter if it is to be used. It will be displayed instead of the dismiss button. 

<div class="title-bar" data-testid="titlebar">
    <div class="title-bar__icon" data-testid="titlebar-icon">
        <span class="material-symbols-rounded" aria-hidden="true">key_vertical</span>
    </div>
    <div class="title-bar__content">
        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
        <div class="title-bar__content-slot content-slot" data-testid="titlebar-content">
            Content
        </div>
    </div>
    <div class="title-bar__icon-right">
        <span class="material-symbols-rounded" aria-hidden="true">add_circle</span>
    </div>
</div>