Trail 18
Day trips€89
Compact and lightweight for short routes.
Product Comparison
Product comparison composed from cards, tables, badges and responsive layout utilities.
Backpack comparison
Summarize each product in a card, then use a table for attributes that customers need to compare directly. Keep the product names in the same order in both views.
Trail backpacks
3 modelsCompare capacity, carrying features and warranty coverage.
Trail 28
Best all-rounder€119
Balanced storage for commuting and weekends.
Trail 42
Multi-day€159
Extra capacity for longer trips and equipment.
| Feature | Trail 18 | Trail 28 | Trail 42 |
|---|---|---|---|
| Capacity | 18 litres | 28 litres | 42 litres |
| Laptop sleeve | Up to 13 inches | Up to 16 inches | Up to 16 inches |
| Rain cover | Optional | Included | Included |
| Warranty | 3 years | 5 years | Lifetime |
<section aria-labelledby="product-comparison-title">
<header class="d-flex align-items-center flex-wrap gap-2 py-3 mb-2">
<h3 class="h4 mb-0" id="product-comparison-title">Trail backpacks</h3>
<span class="badge bg-inverse ms-auto">3 models</span>
</header>
<p class="text-muted" id="product-comparison-description">
Compare capacity, carrying features and warranty coverage.
</p>
<div class="grid gap-3 mb-3">
<article class="card shadow-sm col-12 col-md-4 h-100" aria-labelledby="trail-18-title">
<header class="card-header d-flex align-items-center flex-wrap gap-2">
<h4 class="h5 card-title mb-0" id="trail-18-title">Trail 18</h4>
<span class="badge badge-outline text-primary ms-auto">Day trips</span>
</header>
<div class="card-body">
<p class="h4 mb-1">€89</p>
<p class="text-muted mb-0">Compact and lightweight for short routes.</p>
</div>
</article>
<article class="card shadow-lg border-primary col-12 col-md-4 h-100" aria-labelledby="trail-28-title">
<header class="card-header d-flex align-items-center flex-wrap gap-2">
<h4 class="h5 card-title mb-0" id="trail-28-title">Trail 28</h4>
<span class="badge bg-success ms-auto">Best all-rounder</span>
</header>
<div class="card-body">
<p class="h4 mb-1">€119</p>
<p class="text-muted mb-0">Balanced storage for commuting and weekends.</p>
</div>
</article>
<article class="card shadow-sm col-12 col-md-4 h-100" aria-labelledby="trail-42-title">
<header class="card-header d-flex align-items-center flex-wrap gap-2">
<h4 class="h5 card-title mb-0" id="trail-42-title">Trail 42</h4>
<span class="badge badge-outline text-primary ms-auto">Multi-day</span>
</header>
<div class="card-body">
<p class="h4 mb-1">€159</p>
<p class="text-muted mb-0">Extra capacity for longer trips and equipment.</p>
</div>
</article>
</div>
<div
class="table-responsive card shadow-sm"
role="region"
tabindex="0"
aria-labelledby="product-comparison-title"
aria-describedby="product-comparison-description">
<table class="table table-striped table-hover mb-0">
<caption class="text-start">Trail backpack feature comparison</caption>
<thead>
<tr>
<th scope="col">Feature</th>
<th scope="col">Trail 18</th>
<th scope="col">Trail 28</th>
<th scope="col">Trail 42</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Capacity</th>
<td>18 litres</td>
<td>28 litres</td>
<td>42 litres</td>
</tr>
<tr>
<th scope="row">Laptop sleeve</th>
<td>Up to 13 inches</td>
<td>Up to 16 inches</td>
<td>Up to 16 inches</td>
</tr>
<tr>
<th scope="row">Rain cover</th>
<td>Optional</td>
<td><span class="badge bg-success">Included</span></td>
<td><span class="badge bg-success">Included</span></td>
</tr>
<tr>
<th scope="row">Warranty</th>
<td>3 years</td>
<td>5 years</td>
<td>Lifetime</td>
</tr>
</tbody>
</table>
</div>
</section>