DAHLIA Pattern Library

Notice Container 

<div class="notice-container">
    <ul class="notice-timeline">
        <li class="timeline-icon">
            <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <span class="timeline-label">Applications Open</span>
        </li>
        <li class="timeline-icon">
            <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <span class="timeline-label">Applications Close</span>
        </li>
        <li class="timeline-icon">
            <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <span class="timeline-label">Public Lottery</span>
        </li>
        <li class="timeline-icon">
            <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <span class="timeline-label">Lottery Results</span>
        </li>
        <li class="timeline-icon">
            <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <span class="timeline-label">Units Filled</span>
        </li>
    </ul>

    <div class="notice-status">
        <span class="notice-icon">
      <span class="ui-icon ui-static ui-medium i-color ">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
        </span>
        <p class="notice-label">Status: Applications Closed</p>
        <p>Public lottery will be held on February 14, 2016.</p>
    </div>
</div>
 
<div class="notice-container">
  <ul class="notice-timeline">
    <li class="timeline-icon">
      {{> @icons-base icon="map" }}
      <span class="timeline-label">Applications Open</span>
    </li>
    <li class="timeline-icon">
      {{> @icons-base icon="map" }}
      <span class="timeline-label">Applications Close</span>
    </li>
    <li class="timeline-icon">
      {{> @icons-base icon="map" }}
      <span class="timeline-label">Public Lottery</span>
    </li>
    <li class="timeline-icon">
      {{> @icons-base icon="map" }}
      <span class="timeline-label">Lottery Results</span>
    </li>
    <li class="timeline-icon">
      {{> @icons-base icon="map" }}
      <span class="timeline-label">Units Filled</span>
    </li>
  </ul>

  <div class="notice-status">
    <span class="notice-icon">
      {{> @icons-base icon="map" }}
    </span>
    <p class="notice-label">Status: Applications Closed</p>
    <p>Public lottery will be held on February 14, 2016.</p>
  </div>
</div>
 
/* No context defined for this component. */

There are no notes for this item.