DAHLIA Pattern Library

Status Header 

<header class="status-header status--other ">
    <div class="status-header_content">
        <div class="status-header_icon">
            <span class="ui-icon ui-xlarge">
        <svg>
          <use xlink:href="#i-building"></use>
        </svg>
      </span>
        </div>

        <hgroup class="status-header_group">
            <h2 class="status-header_title gamma">
                Other Listings
            </h2>
            <p class="no-margin">We know you may have options about how many people will live with you. Here are listings for other houseshold sizes and income levels.</p>
        </hgroup>
    </div>

</header>
 
<header class="status-header status--{{default status 'other'}} {{default classes ''}}{{#if button}} has-button{{/if}}">
  <div class="status-header_content">
    <div class="status-header_icon">
      <span class="ui-icon ui-xlarge">
        <svg>
          <use xlink:href="#i-{{default icon 'building'}}"></use>
        </svg>
      </span>
    </div>

    <hgroup class="status-header_group">
      <h2 class="status-header_title gamma">
        {{default title 'Other Listings'}}
      </h2>
      <p class="no-margin">{{default text 'We know you may have options about how many people will live with you. Here are listings for other houseshold sizes and income levels.'}}</p>
    </hgroup>
  </div>

  {{#if button}}
  <div class="status-header_action">
    <button class="button ghost-white expand-small right margin-bottom-none toggler"">{{default button 'Show Lottery Results (6)'}}</button>
  </div>
  {{/if}}
</header>
 
/* No context defined for this component. */

There are no notes for this item.