github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-page-title.hbs (about)

     1  {{#freestyle-usage "page-title" title="Page Title"}}
     2    <div class="mock-spacing">
     3      <h1 class="title">This is the Page Title</h1>
     4    </div>
     5  {{/freestyle-usage}}
     6  {{#freestyle-annotation}}
     7    <p>In its simplest form, a page title is just an H1.</p>
     8  {{/freestyle-annotation}}
     9  
    10  {{#freestyle-usage "page-title-after-elements" title="Page Title with After Elements"}}
    11    <div class="mock-spacing">
    12      <h1 class="title">
    13        This is the Page Title
    14        <span class="bumper-left tag is-running">Running</span>
    15        <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    16      </h1>
    17    </div>
    18  {{/freestyle-usage}}
    19  {{#freestyle-annotation}}
    20    <p>It is common to put high-impact tags and badges to the right of titles. These tags should only ever appear on the right-hand side of the title, and they should be listed in descending weights. Tags with a background are heavier than tags that are hollow. Longer values are heavier than shorter values.</p>
    21  {{/freestyle-annotation}}
    22  
    23  {{#freestyle-usage "page-title-with-status-light" title="Page Title with Status Light"}}
    24    <div class="mock-spacing">
    25      <h1 class="title">
    26        <span class="node-status-light initializing"></span>
    27        This is the Page Title
    28        <span class="bumper-left tag is-running">Running</span>
    29        <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    30      </h1>
    31    </div>
    32  {{/freestyle-usage}}
    33  {{#freestyle-annotation}}
    34    <p>A simple color or pattern is faster to scan than a title and can often say more than words can. For pages that have an important status component to them (e.g., client detail page), a status light can be shown to the left of the title where typically eyes will begin to scan a page.</p>
    35  {{/freestyle-annotation}}
    36  
    37  {{#freestyle-usage "page-title-with-actions" title="Page Title with Actions"}}
    38    <div class="mock-spacing">
    39      <h1 class="title">
    40        <span class="node-status-light initializing"></span>
    41        This is the Page Title
    42        <span class="bumper-left tag is-running">Running</span>
    43        <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    44        <button class="button is-warning is-small is-inline">If you wish</button>
    45        <button class="button is-danger is-outlined is-important is-small is-inline">No Regrets</button>
    46      </h1>
    47    </div>
    48  {{/freestyle-usage}}
    49  {{#freestyle-annotation}}
    50    <p>When actions apply to the entire context of a page, (e.g., job actions on the job detail page), buttons for these actions go in the page title. Buttons are always placed on the far right end of a page title. No elements can go to the right of these buttons.</p>
    51  {{/freestyle-annotation}}