DAHLIA Pattern Library

Lead Header: Short 

<header class="lead-header short has-breadcrumbs bg-dust">
    <div class="row full-width inner--3x">
        <div class="large-12 columns ">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumbs">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li class="current"><a href="#" aria-current="page">Cloning</a></li>
                </ol>
            </nav>
            <hgroup class="lead-header_group">
                <h1 class="lead-header_title small c-oil">Page Header</h1>
                <div class="medium-8 columns no-padding">
                </div>
            </hgroup>
        </div>
    </div>
</header>
 
<header class="lead-header short has-breadcrumbs {{default classes 'bg-dust'}}">
  <div class="row full-width inner--3x">
    <div class="large-12 columns {{default max-width ''}}">
      {{> @breadcrumbs }}
      <hgroup class="lead-header_group">
        <h1 class="lead-header_title small c-{{default color 'oil'}}">{{default title 'Page Header'}}</h1>
        <div class="medium-8 columns no-padding">
          {{#if description}}
          <p class="lead-header_subtitle caps c-{{default color 'oil'}}">{{default description "21 Clarence Place, San Francisco CA"}}</p>
          {{/if}}
        </div>
        {{#if action}}
        <div class="medium-4 columns no-padding">
          <span class="lead-header_secondary-action"><a href="#" class="alt-caps">{{default action 'Export'}}</a></span>
        </div>
        {{/if}}
      </hgroup>
    </div>
  </div>
</header>
 
/* No context defined for this component. */

There are no notes for this item.