<!-- This partner component not completed fully-->
<div class="partner-offers">
<ul>
<li><img src="/assets/example-content/partner-1.png" alt="" /></li>
<li><img src="/assets/example-content/partner-2.png" alt="" /></li>
<li><img src="/assets/example-content/partner-3.png" alt="" /></li>
<li><img src="/assets/example-content/partner-4.png" alt="" /></li>
<li><img src="/assets/example-content/partner-5.png" alt="" /></li>
</ul>
</div>
No notes defined.
{
"partners": [
{
"logoPath": "/assets/example-content/partner-1.png"
},
{
"logoPath": "/assets/example-content/partner-2.png"
},
{
"logoPath": "/assets/example-content/partner-3.png"
},
{
"logoPath": "/assets/example-content/partner-4.png"
},
{
"logoPath": "/assets/example-content/partner-5.png"
}
]
}
.partner-offers {
text-align: center;
ul {
white-space: nowrap;
overflow-x: auto;
background: rgba(255, 232, 165, 0.4);
}
li {
display: inline-block;
vertical-align: middle;
margin: 0 2.25rem;
img {
display: inline-block;
}
}
@media screen and (min-width: $mq-medium) {
li {
margin: 0 7rem;
}
}
}
<!-- This partner component not completed fully-->
<div class="partner-offers">
<ul>
{{#each partners}}
<li><img src="{{logoPath}}" alt="" /></li>
{{/each}}
</ul>
</div>