Generated by SassMeister.com.
<div class="merchant-header">
<div class="merchant-logo">
<img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
<!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">-->
<!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
<!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
</div>
<div class="merchant-info">
<h1 class="h1">
<span class="merchant-name">Target</span>
<span class="merchant-tagline">Coupon Codes and Sales</span>
</h1>
<div class="favorite favorite-merchant">
{{>design_standards/_helpers/icon "icon-heart"}}
<a href="#" class="favorite-link">Favorite</a>
</div>
</div>
</div>
.merchant-logo {
background-color: transparent;
border: 1px solid #ddd;
border-radius: 3px;
display: inline-block;
height: 75px;
line-height: 75px;
overflow: hidden;
text-align: center;
width: 75px;
padding: 5px;
display: block;
margin-right: 20px;
float: left; }
.merchant-logo img {
max-height: 70px;
max-width: 70px;
vertical-align: middle; }
img, video, audio {
max-width: 100%;
height: auto; }
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit; }
// ----
// libsass (v3.2.5)
// ----
@mixin square-image($img-size, $background: transparent, $padding: 0, $border-width: 0, $border-color: #ddd, $border-radius: 0) {
background-color: $background;
border: $border-width solid $border-color;
border-radius: $border-radius;
display: inline-block;
height: $img-size;
line-height: $img-size;
overflow: hidden;
text-align: center;
width: $img-size;
padding: $padding;
img {
@if $padding > 0 {
max-height: ($img-size - 5px);
max-width: ($img-size - 5px);
}
@else {
max-height: $img-size;
max-width: $img-size;
}
vertical-align: middle;
}
}
.merchant-logo {
@include square-image(75px, transparent, 5px, 1px, #ddd, 3px);
display: block;
margin-right: 20px;
float: left;
}
img, video, audio {
max-width: 100%;
height: auto;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
<div class="merchant-header">
<div class="merchant-logo">
<img src="http://o.rmncdn.com/thumbs/logos/l/target.com-coupons.jpg">
<!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/journeys.com-coupons.jpg">-->
<!--<img src="http://s3.amazonaws.com/wsm-cdn-rmn-int/thumbs/logos/l/footaction.com-coupons.jpg">-->
<!--<img src="http://o.rmncdn.com/thumbs/logos/l/gapoutlet.com-coupons.jpg">-->
</div>
<div class="merchant-info">
<h1 class="h1">
<span class="merchant-name">Target</span>
<span class="merchant-tagline">Coupon Codes and Sales</span>
</h1>
<div class="favorite favorite-merchant">
{{>design_standards/_helpers/icon "icon-heart"}}
<a href="#" class="favorite-link">Favorite</a>
</div>
</div>
</div>