DAHLIA Pattern Library

Content Card Grid 

<ul class="content-grid margin-bottom--2x">
    <li class="content-item">
        <div class="content-card bg-dust">
            <h4 class="t-sans t-base t-bold margin-bottom--half">
                <a href="#">City of SF Affordable Rental Units </a>
            </h4>
            <p>Family Housing <br> San Francisco</p>
        </div>
    </li>
    <li class="content-item">
        <div class="content-card bg-dust">
            <h4 class="t-sans t-base t-bold margin-bottom--half">
                <a href="#">City of SF Middle-Income Rental Units </a>
            </h4>
            <p>Individual and Family Housing <br> San Francisco Bay Area</p>
        </div>
    </li>
    <li class="content-item">
        <div class="content-card bg-dust">
            <h4 class="t-sans t-base t-bold margin-bottom--half">
                <a href="#">Episcopal Community Services </a>
            </h4>
            <p>Individual and Family Housing <br> San Francisco Bay Area</p>
        </div>
    </li>
    <li class="content-item">
        <div class="content-card bg-dust">
            <h4 class="t-sans t-base t-bold margin-bottom--half">
                <a href="#">Compass One Home </a>
            </h4>
            <p>Individual and Family Housing <br> San Francisco Bay Area</p>
        </div>
    </li>
</ul>
 
<ul class="content-grid margin-bottom--2x">
  {{#each rentals }}
    <li class="content-item">
      <div class="content-card bg-dust">
        <h4 class="t-sans t-base t-bold margin-bottom--half">
          <a href="#">{{name}} {{#if icon}}{{> @icons-base icon="arrow-right" fill="primary" size="small" }}{{/if}}</a>
        </h4>
        <p>{{#if description}}{{description}} <br>
        {{/if}}{{location}}</p>
      </div>
    </li>
  {{/each}}
</ul>
 
{
  "rentals": [
    {
      "name": "City of SF Affordable Rental Units",
      "url": "http://sfmohcd.org/affordable-housing-developments-san-francisco",
      "description": "Family Housing",
      "location": "San Francisco"
    },
    {
      "name": "City of SF Middle-Income Rental Units",
      "url": "http://sfmohcd.org/middle-income-rental-housing-program",
      "description": "Individual and Family Housing",
      "location": "San Francisco Bay Area"
    },
    {
      "name": "Episcopal Community Services",
      "url": "http://sfmohcd.org/sites/default/files/Documents/MOH/ECS%20Listings.pdf",
      "description": "Individual and Family Housing",
      "location": "San Francisco Bay Area"
    },
    {
      "name": "Compass One Home",
      "url": "https://www.onehomebayarea.org",
      "description": "Individual and Family Housing",
      "location": "San Francisco Bay Area"
    }
  ]
}

There are no notes for this item.