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

switching machines

Browse Source
This commit is contained in:
Kelsey Jackson
2025-02-28 09:37:01 -06:00
parent d906940726
commit 47a7cdedd0
2 changed files with 139 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,32 +5,143 @@ parent: ecommerce
tags: e-commerce
---
## Promotion Dialog
## 3 Column
```html {.example}
<div class="coupon-split">
<img style="height: 100%" src="/assets/images/patterns/coupon.jpg" />
```html{.example}
<div class="wa-callout wa-gap-3xl wa-neutral wa-outlined wa-stack">
<div class="wa-align-items-center wa-grid">
<div>
<span>help us start you off on the right foot.</span>
<h1 style="margin-bottom: 0;">Get 15% Off...*</h1>
<p>...your first online order when you signup for emails.</p>
<wa-input label="Email" style="margin-bottom: 1rem;">
<div slot="hint">What would you <a href='#'>link</a> like people to call you?</div>
</wa-input>
<wa-button size="medium" style="width: 100%; margin-bottom: 1rem;" variant="danger">Email me discount</wa-button>
<p style="font-size: xx-small;font-style: italic;">*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
<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>
<img src="https://tailwindui.com/plus-assets/img/ecommerce-images/incentives-07-hero.jpg" />
</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>
```
## 4 Column
```html{.example}
<div class="wa-callout wa-outlined">
<div class="wa-grid">
<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>
</div>
```
<style>
.coupon {
.coupon-split {
display: grid;
grid-template-columns: 40% 1fr;
gap: 1rem;
}
}
</style>
## 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">
<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>
</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>
```

9
docs/docs/patterns/ecommerce-order-history.md
View File

@@ -28,8 +28,9 @@ tags: e-commerce
<wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
</span>
</div>
<wa-divider></wa-divider>
<div class="wa-stack">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
<img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="max-width: 215px">
<div>
<span class="wa-split">
@@ -46,7 +47,8 @@ tags: e-commerce
</div>
</div>
</div>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<wa-divider></wa-divider>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
<img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="max-width: 215px">
<div>
<span class="wa-split">
@@ -63,7 +65,8 @@ tags: e-commerce
</div>
</div>
</div>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);padding-bottom: 1rem;">
<wa-divider></wa-divider>
<div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
<img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="max-width: 215px">
<div>
<span class="wa-split">