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 incentives

Browse Source
This commit is contained in:
Kelsey Jackson
2025-03-04 11:04:31 -06:00
parent 80b78aeb16
commit 007d93077f
1 changed files with 60 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
docs/docs/patterns/ecommerce-incentives.md
View File

@@ -35,6 +35,62 @@ tags: e-commerce
</div>
</div>
```
## 2 Column with Cards
```html{.example}
<div class="wa-grid" style="--min-column-size: 41ch;">
<wa-card style="--border-color: var(--wa-color-indigo-60);color: var(--border-color);--wa-panel-border-width: 2px;">
<div class="wa-flank">
<div>
<wa-icon name="hands" style="font-size: 2.5rem;"></wa-icon>
</div>
<div class="wa-gap-s wa-stack">
<span class="wa-heading-m">Hands-on training</span>
<p class="wa-caption-l">Upskill effectively with AI-powered coding exercises, practice tests, and quizzes.</p>
</div>
</div>
</wa-card>
<wa-card style="--border-color: var(--wa-color-indigo-60);color: var(--border-color);--wa-panel-border-width: 2px;">
<div class="wa-flank">
<div>
<wa-icon name="medal" style="font-size: 2.5rem;"></wa-icon>
</div>
<div class="wa-gap-s wa-stack">
<span class="wa-heading-m">Certification prep</span>
<p class="wa-caption-l">Prep for industry-recognized certifications by solving real-world challenges and earn badges along the way</p>
</div>
</div>
</wa-card>
<wa-card style="--border-color: var(--wa-color-indigo-60);color: var(--border-color);--wa-panel-border-width: 2px;">
<div class="wa-flank">
<div>
<wa-icon name="chart-line" style="font-size: 2.5rem;"></wa-icon>
</div>
<div class="wa-gap-s wa-stack">
<div class="wa-split wa-gap-2xs">
<span class="wa-heading-m">Insights and analytics</span>
<wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
</div>
<p class="wa-caption-l">Fast-track goals with advanced insights plus a dedicated customer success team to help drive effective learning.</p>
</div>
</div>
</wa-card>
<wa-card style="--border-color: var(--wa-color-indigo-60);color: var(--border-color);--wa-panel-border-width: 2px;">
<div class="wa-flank">
<div>
<wa-icon name="puzzle-piece" style="font-size: 2.5rem;"></wa-icon>
</div>
<div class="wa-gap-s wa-stack">
<div class="wa-split wa-gap-2xs">
<span class="wa-heading-m">Customizable content</span>
<wa-badge appearance="filled outlined" variant="warning">Pro Plan</wa-badge>
</div>
<p class="wa-caption-l">Create tailored learning paths for team and organization goals and even host your own content and resources.</p>
</div>
</div>
</wa-card>
</div>
```
## 4 Column
@@ -43,105 +99,24 @@ tags: e-commerce
<div class="wa-grid">
<div class="wa-stack wa-gap-xs">
<img src="https://img.freepik.com/free-vector/marketing-consulting-concept-illustration_114360-9027.jpg?t=st=1740777544~exp=1740781144~hmac=47eaff410455dfda95a1d418c7701b10627eddffb6a99dbab244093ac2760bad&w=1060" height="240" width="240" />
<span class="wa-heading-s">Free shipping</span>
<span class="wa-heading-s">SEO Consulting</span>
<p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
</div>
<div class="wa-stack wa-gap-xs">
<img src="https://img.freepik.com/free-vector/seminar-concept-illustration_114360-7480.jpg?t=st=1740777518~exp=1740781118~hmac=2889f560bce2aa5542f046d626fe5dc09afbcd9eeb17e757673573d838131a13&w=1060" height="240" width="240" />
<span class="wa-heading-s">10-year warranty</span>
<span class="wa-heading-s">In Person Training</span>
<p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
</div>
<div class="wa-stack wa-gap-xs">
<img src="https://img.freepik.com/free-vector/agile-method-concept-illustration_114360-9826.jpg?t=st=1740777427~exp=1740781027~hmac=edc4a8ab7979fea28eefdaa3a2390749a2fd0f8f34a0f5f2538428cff0505000&w=1060" height="240" width="240" />
<span class="wa-heading-s">Exchanges</span>
<span class="wa-heading-s">1 on 1 Sessions</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
<div class="wa-stack wa-gap-xs">
<img src="https://img.freepik.com/free-vector/low-code-development-concept-illustration_114360-7294.jpg?t=st=1740777101~exp=1740780701~hmac=f905379010c1d63fddecd2d70387bb67f49083bc51d9f682c33405714acc3d3e&w=1060" height="240" width="240" />
<span class="wa-heading-s">Exchanges</span>
<span class="wa-heading-s">Web Development</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
</div>
</div>
```
## 3 Column
```html{.example}
<div class="wa-callout wa-neutral wa-stack wa-outlined" style="max-width: 960px; margin: 0 auto;">
<div>
<span class="wa-heading-xl">We built our business on great customer service</span>
<p class="wa-caption-l">At the beginning at least, but then we realized we could make a lot more money if we kinda stopped caring about that. Our new strategy is to write a bunch of things that look really good in the headlines, then clarify in the small print but hope people don't actually read it.</p>
</div>
<div class="wa-grid">
<div class="wa-stack wa-gap-xs">
<img src="https://images.unsplash.com/vector-1740057539008-eb7a68be2b0d?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="120" width="120" />
<span class="wa-heading-s">Free shipping</span>
<p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
</div>
<div class="wa-stack wa-gap-xs">
<img src="https://images.unsplash.com/vector-1739647326715-454fb6be54be?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="120" width="120" />
<span class="wa-heading-s">10-year warranty</span>
<p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
</div>
<div class="wa-stack wa-gap-xs">
<img src="https://images.unsplash.com/vector-1740057539117-42cb2c6da083?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="120" width="120" />
<span class="wa-heading-s">Exchanges</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
</div>
</div>
```
## 3 Column Centered
```html{.example}
<div class="wa-callout wa-neutral" style="max-width: 960px; margin: 0 auto;">
<div class="wa-grid">
<div class="wa-stack wa-gap-xs wa-align-items-center">
<wa-icon style="font-size: 2rem;" name="truck-fast"></wa-icon>
<span class="wa-heading-s">Free shipping</span>
<p class="wa-caption-m" style="te">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
</div>
<div class="wa-stack wa-gap-xs wa-align-items-center">
<wa-icon style="font-size: 2rem;" name="award"></wa-icon>
<span class="wa-heading-s">10-year warranty</span>
<p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
</div>
<div class="wa-stack wa-gap-xs wa-align-items-center">
<wa-icon style="font-size: 2rem;" name="rotate"></wa-icon>
<span class="wa-heading-s">Exchanges</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
</div>
</div>
```
## 2 Column Grid
```html{.example}
<div class="wa-grid wa-callout wa-neutral wa-outlined wa-gap-l" style="--min-column-size: 406px;">
<div class="wa-stack wa-gap-xs">
<wa-icon style="font-size: 2rem;" name="truck-fast"></wa-icon>
<span class="wa-heading-s">Free shipping</span>
<p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
</div>
<div class="wa-stack wa-gap-xs">
<wa-icon style="font-size: 2rem;" name="award"></wa-icon>
<span class="wa-heading-s">10-year warranty</span>
<p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
</div>
<div class="wa-stack wa-gap-xs">
<wa-icon style="font-size: 2rem;" name="rotate"></wa-icon>
<span class="wa-heading-s">Exchanges</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
<div class="wa-stack wa-gap-xs">
<wa-icon style="font-size: 2rem;" name="rotate"></wa-icon>
<span class="wa-heading-s">Exchanges</span>
<p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
</div>
</div>
```