Basic Example
A basic example of a skeleton component, used to indicate loading states in this case for the media object.
Media Skeleton
This is a placeholder for media content that is currently loading.
<div class="o-media | u-w-50%-@bp2">
<div class="o-media__thumb | u-mr-sm">
<div class="c-skeleton | u-aspect--4x3 u-radius u-w-8"></div>
</div>
<div class="o-media__body">
<div class="o-media__content | o-flow-sm">
<h3 class="c-skeleton | u-heading u-epsilon u-mb-xxs">Media Skeleton</h3>
<p class="c-skeleton | u-fs-sm u-mb-xs">This is a placeholder for media content that is currently loading.</p>
</div>
</div>
</div>Card Skeleton
A skeleton for a card component, used to indicate loading states for card content.
New • Brand Range and Type Derivative
Price: £13,882
3 Images Video Available
1,000 Miles Automatic Diesel 113 g/km 62.8 mpg 2016 '66'
Representative APR: 9.9%
Monthly from: £268 pm PCP
New • Brand Range and Type Derivative
Price: £13,882
3 Images Video Available
1,000 Miles Automatic Diesel 113 g/km 62.8 mpg 2016 '66'
Representative APR: 9.9%
Monthly from: £268 pm PCP
<div class="c-card c-card--vehicle">
<div class="c-card__head">
<span class="c-skeleton c-skeleton--text c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xs">New • Brand</span>
<span class="c-skeleton c-skeleton--text c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-skeleton c-skeleton--text c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-skeleton c-skeleton--text c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
</div>
</div>
<div class="c-skeleton c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<div class="c-img | o-fit u-aspect--3x2"></div>
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-skeleton c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer">
<div class="c-skeleton c-skeleton--text | o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="c-skeleton c-skeleton--text | o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</div>
<div class="c-card c-card--vehicle">
<div class="c-card__head">
<span class="c-brand | u-heading u-tc-slate-600 u-fs-uppercase u-fs-spaced u-trunc u-mb-xs">New • Brand</span>
<span class="c-range | u-heading u-epsilon u-mb-xxs">
<span class="u-trunc">Range and Type</span>
</span>
<span class="c-derivative | u-fs-sm u-block u-fw-600 u-trunc u-mb-xs">Derivative</span>
<div class="c-pricing">
<div class="o-split">
<span class="o-split__title">Price: </span>
<span class="c-price">
<span class="c-price__value">£13,882</span>
</span>
</div>
</div>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-item c-card__thumb-item--btm-left c-card__thumb-item--has-media | u-fs-sm">
<span class="u-inline-flex">
<svg class="c-icon u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.655 14h8.69c.914 0 1.655-.741 1.655-1.655v-8.69C14 2.741 13.259 2 12.345 2h-8.69C2.741 2 2 2.741 2 3.655v8.69C2 13.259 2.741 14 3.655 14Z"/>
<path d="M11.5 12H4.6a.8.8 0 0 1-.64-1.28L6 8l1 .984L8.994 6l3.171 4.756A.8.8 0 0 1 11.5 12ZM4.997 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
3
<span class="u-hidden">Images</span>
</span>
<span class="u-inline-flex u-ml-xs">
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<rect width="10" height="9" x="1" y="4" stroke-width="1.5" rx="2"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11 7 4-2v7l-4-2"/>
</g>
</svg>
<span class="u-hidden">Video Available</span>
</span>
</div>
<img class="c-img | o-fit u-aspect--3:2" src="https://cdn-01.imagin.studio/getImage?&customer=listers&make=bmw&modelFamily=series-4&modelRange=series-4&modelVariant=co&modelYear=2021&powerTrain=petrol&transmission=0&bodySize=2&trim=eu&paintId=imagin-grey&zoomLevel=0&aspectRatio=1-5&width=315&angle=01-@x2.webp" width="320" height="203" alt="Car Descriptive Name" />
</div>
<div class="c-card__body | u-flex u-flex-wrap u-gap u-gap-sm">
<span class="c-badge c-badge--lg | u-fs-sm">1,000 Miles</span>
<span class="c-badge c-badge--lg | u-fs-sm">Automatic</span>
<span class="c-badge c-badge--lg | u-fs-sm">Diesel</span>
<span class="c-badge c-badge--lg | u-fs-sm">113 g/km</span>
<span class="c-badge c-badge--lg | u-fs-sm">62.8 mpg</span>
<span class="c-badge c-badge--lg | u-fs-sm">2016 '66'</span>
</div>
<div class="c-card__footer">
<div class="o-split">
<span class="o-split__title">Representative APR:</span>
<strong>9.9%</strong>
</div>
<div class="o-split">
<span class="o-split__title">Monthly from:</span>
<strong>£268 pm PCP</strong>
</div>
</div>
</div>