DAHLIA Pattern Library

Buckets 

<section class="buckets">
    <div class="bucket">
        <h3 class="bucket-title">Certificate of Preference</h3>
        <p class="bucket-subtitle">up to 50 units</p>
        <p class="t-tiny c-steel no-margin">10 applicants on this list</p>
    </div>
    <div class="bucket">
        <h3 class="bucket-title">Displaced Tenants Housing Preference</h3>
        <p class="bucket-subtitle">up to 10 units</p>
        <p class="t-tiny c-steel no-margin">15 applicants on this list</p>
    </div>
    <div class="bucket">
        <h3 class="bucket-title">Neighborhood Resident Housing Preference</h3>
        <p class="bucket-subtitle">up to 20 units</p>
        <p class="t-tiny c-steel no-margin">1200 applicants on this list</p>
    </div>
    <div class="bucket">
        <h3 class="bucket-title">Live/Work Preference</h3>
        <p class="bucket-subtitle">any remaining units</p>
        <p class="t-tiny c-steel no-margin">2800 applicants on this list</p>
    </div>
</section>
 
<section class="buckets">
  {{#each items default='buckets'}}
  <div class="bucket{{#if has-stat}} has-stat{{/if}}">
    {{#if has-stat}}
    <div class="bucket-stat">
      <span class="bucket-stat_label">Rank</span>
      <span class="bucket-stat_value">{{this.rank}}</span>
    </div>
    {{/if}}
    <h3 class="bucket-title">{{this.name}}</h3>
    <p class="bucket-subtitle">{{this.units}}</p>
    <p class="t-tiny c-steel no-margin">{{this.applicants}}</p>
  </div>
  {{else}}
    {{#each buckets}}
    <div class="bucket{{#if has-stat}} has-stat{{/if}}">
      {{#if has-stat}}
      <div class="bucket-stat">
        <span class="bucket-stat_label">Rank</span>
        <span class="bucket-stat_value">{{this.rank}}</span>
      </div>
      {{/if}}
      <h3 class="bucket-title">{{this.name}}</h3>
      <p class="bucket-subtitle">{{this.units}}</p>
      <p class="t-tiny c-steel no-margin">{{this.applicants}}</p>
    </div>
  {{/each}}
  {{/each}}
</section>
 
{
  "buckets": [
    {
      "name": "Certificate of Preference",
      "units": "up to 50 units",
      "applicants": "10 applicants on this list",
      "rank": "10",
      "overall": "Your ranking in this list is 10 out of of 10 qualified applicants."
    },
    {
      "name": "Displaced Tenants Housing Preference",
      "units": "up to 10 units",
      "applicants": "15 applicants on this list",
      "rank": "15",
      "overall": "Your ranking in this list is 15 out of of 15 qualified applicants."
    },
    {
      "name": "Neighborhood Resident Housing Preference",
      "units": "up to 20 units",
      "applicants": "1200 applicants on this list",
      "download": true,
      "rank": "285",
      "overall": "Your ranking in this list is 285 out of of 1200 qualified applicants."
    },
    {
      "name": "Live/Work Preference",
      "units": "any remaining units",
      "applicants": "2800 applicants on this list",
      "download": true,
      "rank": "385",
      "overall": "Your ranking in this list is 385 out of of 2800 qualified applicants."
    }
  ],
  "buckets-stats": [
    {
      "name": "Certificate of Preference",
      "units": "up to 50 units",
      "applicants": "10 applicants on this list",
      "rank": "10",
      "overall": "Your ranking in this list is 10 out of of 10 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Displaced Tenants Housing Preference",
      "units": "up to 10 units",
      "applicants": "15 applicants on this list",
      "rank": "15",
      "overall": "Your ranking in this list is 15 out of of 15 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Neighborhood Resident Housing Preference",
      "units": "up to 20 units",
      "applicants": "1200 applicants on this list",
      "download": true,
      "rank": "285",
      "overall": "Your ranking in this list is 285 out of of 1200 qualified applicants.",
      "has-stat": true
    },
    {
      "name": "Live/Work Preference",
      "units": "any remaining units",
      "applicants": "2800 applicants on this list",
      "download": true,
      "rank": "385",
      "overall": "Your ranking in this list is 385 out of of 2800 qualified applicants.",
      "has-stat": true
    }
  ]
}

There are no notes for this item.