js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated content for category preview

Browse Source
This commit is contained in:
Kelsey Jackson
2025-02-21 10:08:33 -06:00
parent db592194fd
commit 65af9980f1
1 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/docs/patterns/ecommerce-category-preview.md
View File

@@ -19,7 +19,7 @@ icon: preview
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
@@ -61,44 +61,52 @@ icon: preview
<a href="#" class="wa-cluster">Browse all Categories <wa-icon name="arrow-right"></wa-icon></a>
</div>
<div class="wa-stack">
<wa-card with-image class="card-image">
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
</wa-card>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image class="card-image">
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor-3x.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
</wa-card>
</a>
<div class="wa-grid">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/home.jpg"
alt="Cozy up on the couch and relax"
/>
<span class="wa-heading-m">Home</span>
<p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
</wa-card>
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
alt="Get fit in style with our breathable poly blends"
/>
<span class="wa-heading-m">Active</span>
<p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
</wa-card>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/home.jpg"
alt="Cozy up on the couch and relax"
/>
<span class="wa-heading-m">Home</span>
<p class="wa-caption-l"><em>Cozy up on the couch and relax</em></p>
</wa-card>
</a>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image>
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/fitness.jpg"
alt="Get fit in style with our breathable poly blends"
/>
<span class="wa-heading-m">Active</span>
<p class="wa-caption-l"><em>Get fit in style with our breathable poly blends</em></p>
</wa-card>
</a>
</div>
<a href="*" style="--wa-link-decoration-default: none;">
<wa-card with-image class="card-image">
<img
slot="image"
src="https://img.fortawesome.com/cfa83f3c/outdoor.jpg"
src="https://img.fortawesome.com/cfa83f3c/pet.jpg"
alt="Durable gear for all conditions"
/>
<span class="wa-heading-m">Outdoor</span>
<p class="wa-caption-l"><em>Durable gear for all conditions</em></p>
<span class="wa-heading-m">Animal & Pet</span>
<p class="wa-caption-l"><em>Don't forget about your four legged friends</em></p>
</wa-card>
</a>
</div>
</div>
```