<div class="Container border-grey">
<div class="Grid Grid--3 pa5">
<!-- grid item, containing a card -->
<div class="item-1">
<div class="Card Card--radius">
<div class="Card-thumb Card-thumb--portrait pa4" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);">
<div class="Avatar Avatar--square Avatar--m" style="background: #4A8CFF;">
<div class="Avatar--initials">SS</div>
<div class="Avatar--img Avatar--square"></div>
</div>
<!-- /.Avatar -->
<div class="Card-label">
<span class="Label-icon Label-icon--right Label--round Label--success">SEIS<i class="material-icons md-18">check</i></span>
</div>
<!-- /.Card-label -->
<div class="Card-progress">
<div class="ProgressBar ProgressBar--s">
<div class="ProgressBar-success ProgressBar-success--s Tooltip" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="Tooltip-text Tooltip-text--success Tooltip-text--top">40% Complete</span>
</div>
</div>
<!-- /.ProgressBar -->
</div>
<!-- /.Card-progress -->
</div>
<!-- /.Card-thumb -->
<article class="pa4">
<h3 class="f5"><a class="Link Link--underline-hover color-grey-80" href="#">Fusion Complex</a></h3>
<p class="Card-description mt2">Comprising of three, three bedroom apartments and three two bedroom apartments this secure, modern development has the design team's signature architectural finish, attention to detail.</p>
<div class="Card-grid Card-grid--2 mt3">
<div class="Card-grid-item">
<span class="f4"><strong>£250,000</strong></span>
<p class="f2 color-grey-60">Raised</p>
</div>
<!-- /.Card-grid-item -->
<div class="Card-grid-item">
<span class="f4"><strong>£5,000,000</strong></span>
<p class="f2 color-grey-60">Needed</p>
</div>
<!-- /.Card-grid-item -->
</div>
<!-- /.Card-grid -->
<div class="Card-location mt3">
<i class="material-icons md-18">location_on</i>
<p class="ml4">London, UK</p>
</div>
<!-- /.Card-location -->
<div class="mt3">
<a href="#" class="Button Button--primary Button--s mr1">Find out more</a>
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip mr1">
<i class="material-icons md-18">star</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Shortlist</span>
</a>
<!-- /.Icon -->
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip">
<i class="material-icons md-18">delete</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Delete</span>
</a>
<!-- /.Icon -->
</div>
<!-- /.mt3 -->
</article>
<!-- /.pa4 -->
</div>
<!-- /.Card -->
</div>
<!-- /.item-1 -->
<!-- grid item, containing a card -->
<div class="item-2">
<div class="Card Card--radius">
<div class="Card-thumb Card-thumb--portrait pa4" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flor.jpg);">
<div class="Avatar Avatar--square Avatar--m" style="background: #4A8CFF;">
<div class="Avatar--initials">SS</div>
<div class="Avatar--img Avatar--square"></div>
</div>
<!-- /.Avatar -->
<div class="Card-progress">
<div class="ProgressBar ProgressBar--s">
<div class="ProgressBar-success ProgressBar-success--s Tooltip" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="Tooltip-text Tooltip-text--success Tooltip-text--top">40% Complete</span>
</div>
</div>
<!-- /.ProgressBar -->
</div>
<!-- /.Card-progress -->
</div>
<!-- /.Card-thumb -->
<article class="pa4">
<h3 class="f5"><a class="Link Link--underline-hover color-grey-80" href="#">Fusion Complex</a></h3>
<p class="Card-description mt2">Comprising of three, three bedroom apartments and three two bedroom apartments this secure, modern development has the design team's signature architectural finish, attention to detail.</p>
<div class="Card-grid Card-grid--2 mt3">
<div class="Card-grid-item">
<span class="f4"><strong>£250,000</strong></span>
<p class="f2 color-grey-60">Raised</p>
</div>
<!-- /.Card-grid-item -->
<div class="Card-grid-item">
<span class="f4"><strong>£5,000,000</strong></span>
<p class="f2 color-grey-60">Needed</p>
</div>
<!-- /.Card-grid-item -->
</div>
<!-- /.Card-grid -->
<div class="Card-location mt3">
<i class="material-icons md-18">location_on</i>
<p class="ml4">London, UK</p>
</div>
<div class="mt3">
<a href="#" class="Button Button--primary Button--s mr1">Find out more</a>
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip mr1">
<i class="material-icons md-18">star</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Shortlist</span>
</a>
<!-- /.Icon -->
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip">
<i class="material-icons md-18">delete</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Delete</span>
</a>
<!-- /.Icon -->
</div>
<!-- /.mt3 -->
</article>
<!-- /.pa4 -->
</div>
<!-- /.Card -->
</div>
<!-- /.item-2 -->
<!-- grid item, containing a card -->
<div class="item-3">
<div class="Card Card--radius">
<div class="Card-thumb Card-thumb--portrait pa4">
<div class="Avatar Avatar--square Avatar--m" style="background: #4A8CFF;">
<div class="Avatar--initials">SS</div>
<div class="Avatar--img Avatar--square"></div>
</div>
<!-- /.Avatar -->
<div class="Card-label">
<span class="Label-icon Label-icon--right Label--round Label--success">EIS<i class="material-icons md-18">check</i></span>
</div>
<!-- /.Card-label -->
<div class="Card-progress">
<div class="ProgressBar ProgressBar--s">
<div class="ProgressBar-success ProgressBar-success--s Tooltip" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="Tooltip-text Tooltip-text--success Tooltip-text--top">40% Complete</span>
</div>
</div>
<!-- /.ProgressBar -->
</div>
<!-- /.Card-progress -->
</div>
<!-- /.Card-thumb -->
<article class="pa4">
<h3 class="f5"><a class="Link Link--underline-hover color-grey-80" href="#">Fusion Complex</a></h3>
<p class="Card-description mt2">Comprising of three, three bedroom apartments and three two bedroom apartments this secure, modern development has the design team's signature architectural finish, attention to detail.</p>
<div class="Card-grid Card-grid--2 mt3">
<div class="Card-grid-item">
<span class="f4"><strong>£250,000</strong></span>
<p class="f2 color-grey-60">Raised</p>
</div>
<!-- /.Card-grid-item -->
<div class="Card-grid-item">
<span class="f4"><strong>£5,000,000</strong></span>
<p class="f2 color-grey-60">Needed</p>
</div>
<!-- /.Card-grid-item -->
</div>
<!-- /.Card-grid -->
<div class="Card-location mt3">
<i class="material-icons md-18">location_on</i>
<p class="ml4">London, UK</p>
</div>
<div class="mt3">
<a href="#" class="Button Button--primary Button--s mr1">Find out more</a>
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip mr1">
<i class="material-icons md-18">star</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Shortlist</span>
</a>
<!-- /.Icon -->
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip">
<i class="material-icons md-18">delete</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Delete</span>
</a>
<!-- /.Icon -->
</div>
<!-- /.mt3 -->
</article>
<!-- /.pa4 -->
</div>
<!-- /.Card -->
</div>
<!-- grid item, containing a card -->
<div class="item-4">
<div class="Card Card--radius">
<div class="Card-thumb Card-thumb--portrait pa4">
<div class="Card-avatar">
<div class="Avatar Avatar--square Avatar--m" style="background: #4A8CFF;">
<div class="Avatar--initials">SS</div>
<div class="Avatar--img Avatar--square"></div>
</div>
<!-- /.Avatar -->
</div>
<!-- /.Card-avatar -->
<div class="Card-progress">
<div class="ProgressBar ProgressBar--s">
<div class="ProgressBar-success ProgressBar-success--s Tooltip" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
<span class="Tooltip-text Tooltip-text--success Tooltip-text--top">40% Complete</span>
</div>
</div>
<!-- /.ProgressBar -->
</div>
<!-- /.Card-progress -->
</div>
<!-- /.Card-thumb -->
<article class="pa4">
<h3 class="f5"><a class="Link Link--underline-hover color-grey-80" href="#">Fusion Complex</a></h3>
<p class="Card-description mt2">Comprising of three, three bedroom apartments and three two bedroom apartments this secure, modern development has the design team's signature architectural finish, attention to detail.</p>
<div class="Card-grid Card-grid--2 mt3">
<div class="Card-grid-item">
<span class="f4"><strong>£250,000</strong></span>
<p class="f2 color-grey-60">Raised</p>
</div>
<!-- /.Card-grid-item -->
<div class="Card-grid-item">
<span class="f4"><strong>£5,000,000</strong></span>
<p class="f2 color-grey-60">Needed</p>
</div>
<!-- /.Card-grid-item -->
</div>
<!-- /.Card-grid -->
<div class="Card-location mt3">
<i class="material-icons md-18">location_on</i>
<p class="ml4">London, UK</p>
</div>
<div class="mt3">
<a href="#" class="Button Button--primary Button--s mr1">Find out more</a>
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip mr1">
<i class="material-icons md-18">star</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Shortlist</span>
</a>
<!-- /.Icon -->
<a href="#" class="Icon Icon--s Button Button--secondary Button--icon Tooltip">
<i class="material-icons md-18">delete</i>
<span class="Tooltip-text Tooltip-text--top Tooltip-text--default" >Delete</span>
</a>
<!-- /.Icon -->
</div>
<!-- /.mt3 -->
</article>
<!-- /.pa4 -->
</div>
<!-- /.Card -->
</div>
<!-- /.item-3 -->
</div>
<!-- /.Grid -->
</div>
<!-- /.Container -->