<a href="https://pioneerdj.com/en-us/product/accessories/djc-1x-bag/bag/" class="snippet-b">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-1x-bag/djc-1x_ddj-1000.png?h=250&amp;w=400&amp;hash=B5D5C735E00683D29F73DDE87CA69D3E" class="lazyload" alt="Product shot">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Product</span>
<h2 class="snippet-b__heading heading heading--6">DJC-1X BAG - DJ controller bag for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3 and DDJ-RX</h2>
<div class="snippet-b__description">This DJ controller bag is the perfect size for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3, DDJ-RX. The bag's protective egg-foam and fleeced lining prevent damage from vibrations and shocks.</div>
</div>
</div>
</a>
<a href="{{ url }}" class="snippet-b{{#if archived}} is-archived{{/if}}{{#if video}} is-video video-player__trigger{{/if}}">
{{#if video}}
<span class="video-ID">{{ video }}</span>
{{/if}}
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
{{render '@visual' visual merge=true }}
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">{{ label }}</span>
<h2 class="snippet-b__heading heading heading--6">{{ heading }}</h2>
<div class="snippet-b__description">{{ description }}</div>
</div>
</div>
</a>
label: Product
archived: false
url: https://pioneerdj.com/en-us/product/accessories/djc-1x-bag/bag/
visual:
src: >-
https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-1x-bag/djc-1x_ddj-1000.png?h=250&w=400&hash=B5D5C735E00683D29F73DDE87CA69D3E
alt: Product shot
heading: >-
DJC-1X BAG - DJ controller bag for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2,
DDJ-SX3 and DDJ-RX
description: >-
This DJ controller bag is the perfect size for the DDJ-1000, DDJ-1000SRT,
DDJ-SX, DDJ-SX2, DDJ-SX3, DDJ-RX. The bag's protective egg-foam and fleeced
lining prevent damage from vibrations and shocks.
.snippet-b {
transition: border-color 250ms, background-color 250ms;
display: block;
padding: var(--gap--4);
color: inherit;
text-decoration: none;
border: 1px solid var(--color--neutrals-2);
background-color: var(--color--neutrals-0);
&[href]:hover {
border-color: var(--color--neutrals-3);
background-color: var(--color--neutrals-1);
}
}
.snippet-b__inner {
display: flex;
align-items: flex-start;
.snippet-b.is-video & {
flex-direction: row-reverse;
@media (min-width: 750px) {
flex-direction: row;
}
}
}
.snippet-b__aside {
display: none;
@media (min-width: 750px) {
transition: border-color 250ms, background-color 250ms;
display: block;
flex: 0 0 180px;
margin-right: var(--gap--4);
margin-left: var(--gap--4);
margin-left: 0;
overflow: hidden;
}
}
.snippet-b__visual {
position: relative;
display: block;
width: 100%;
height: 0;
padding-top: (137 / 174) * 100%;
}
.snippet-b:not(.is-video) .snippet-b__visual img {
object-fit: contain !important;
}
.snippet-b__visual:after {
.is-video & {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid var(--color--action);
content: '';
}
.is-video:hover & {
transition: border-color 250ms;
border-left-color: var(--color--hover);
}
}
.snippet-b__content {
flex: 1 1 auto;
}
.snippet-b__label {
transition: border-color 250ms;
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 0 var(--gap--3);
color: var(--color--neutrals-0);
font-size: 14px;
font-weight: 700;
background-color: var(--color--neutrals-7);
.snippet-b.is-archived & {
background-color: var(--color--neutrals-4);
}
}
.snippet-b__heading {
margin-top: var(--gap--2) !important;
color: var(--color--neutrals-10) !important;
font-weight: 500;
}
.snippet-b__description {
transition: color 250ms;
margin-top: var(--gap--2);
color: var(--color--neutrals-8);
font-size: var(--p--2);
line-height: 1.538;
@media (min-width: 750px) {
margin-top: var(--gap--1);
}
}
No notes defined.