Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="EditorialPromo EditorialPromo--3up">
<header class="Header">
<h1 class="Header-headline">What We're Loving Now</h1>
<a class="Header-cta" href="#">See More!</a>
<p class="Header-description">A few of the things we like</p>
</header>
<ul class="MediaList">
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
</ul>
</div>
// ----
// libsass (v3.3.2)
// ----
/*
@include module('EditorialPromo') {
test: $this;
@include headline() {
type: $editorialPromo-headline;
}
}
*/
.EditorialPromo {
test: this;
}
.EditorialPromo-headline {
type: headline;
}
<div class="EditorialPromo EditorialPromo--3up">
<header class="Header">
<h1 class="Header-headline">What We're Loving Now</h1>
<a class="Header-cta" href="#">See More!</a>
<p class="Header-description">A few of the things we like</p>
</header>
<ul class="MediaList">
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
<li class="MediaBlock">
<a src="#" class="MediaBlock-media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.