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

started building pricing pattern

Browse Source
This commit is contained in:
Kelsey Jackson
2024-10-05 17:10:24 -05:00
parent 6fe026357e
commit 78dd896386
1 changed files with 156 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
docs/docs/patterns/app.md
View File

@@ -871,7 +871,162 @@ TODO Page Description
</style>
```
## Pricing
```html{.example}
<div class="pricing">
<wa-card with-footer class="plan">
<div class="card-body">
<div class="plan-title">Basic Plan</div>
<span class="plan-price">
<span style="font-size: xxx-large; font-weight: 800;">$10</span>
<span style="margin-left: 0.5rem;">
<p style="margin-bottom: 0;">per user</p>
<p style="margin-bottom: 0;">per month</p>
</span>
</span>
<p>Basic features for up to 10 users.</p>
<wa-button style="width: 100%; margin-bottom: 1rem;">Get Started</wa-button>
<wa-button style="width: 100%; margin-bottom: 1rem;" appearance="outlined">Talk to sales</wa-button>
</div>
<div slot="footer" class="features">
<span class="list-title">Features</span>
<p style="margin-bottom: var(--wa-space-s);">Everything in our free plans plus...</p>
<ul>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Access to basic features
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic Reporting and analytics
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Up to 10 individual users
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
20GB Individual data each user
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic chat and email support
</li>
</ul>
</div>
</wa-card>
<wa-card with-footer class="plan">
<div class="card-body">
<div class="plan-title" style="display: flex; justify-content: space-between;">Basic Plan <wa-badge variant="success" pill>Most Popular</wa-badge></div>
<span class="plan-price">
<span style="font-size: xxx-large; font-weight: 800;">$10</span>
<span style="margin-left: 0.5rem;">
<p style="margin-bottom: 0;">per user</p>
<p style="margin-bottom: 0;">per month</p>
</span>
</span>
<p>Basic features for up to 10 users.</p>
<wa-button style="width: 100%; margin-bottom: 1rem;">Get Started</wa-button>
<wa-button style="width: 100%; margin-bottom: 1rem;" appearance="outlined">Talk to sales</wa-button>
</div>
<div slot="footer" class="features">
<span class="list-title">Features</span>
<p style="margin-bottom: var(--wa-space-s);">Everything in our free plans plus...</p>
<ul>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Access to basic features
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic Reporting and analytics
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Up to 10 individual users
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
20GB Individual data each user
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic chat and email support
</li>
</ul>
</div>
</wa-card>
<wa-card with-footer class="plan">
<div class="card-body">
<div class="plan-title">Basic Plan</div>
<span class="plan-price">
<span style="font-size: xxx-large; font-weight: 800;">$10</span>
<span style="margin-left: 0.5rem;">
<p style="margin-bottom: 0;">per user</p>
<p style="margin-bottom: 0;">per month</p>
</span>
</span>
<p>Basic features for up to 10 users.</p>
<wa-button style="width: 100%; margin-bottom: 1rem;">Get Started</wa-button>
<wa-button style="width: 100%; margin-bottom: 1rem;" appearance="outlined">Talk to sales</wa-button>
</div>
<div slot="footer" class="features">
<span class="list-title">Features</span>
<p style="margin-bottom: var(--wa-space-s);">Everything in our free plans plus...</p>
<ul>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Access to basic features
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic Reporting and analytics
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Up to 10 individual users
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
20GB Individual data each user
</li>
<li>
<wa-icon name="circle-check" style="color: #63e6be; margin-right: .25rem;"></wa-icon>
Basic chat and email support
</li>
</ul>
</div>
</wa-card>
</div>
<style>
.pricing {
.plan {
}
.plan-title {
font-weight: 600;
}
.plan-price {
display: flex;
align-items: center;
}
.features {
.list-title {
text-transform: uppercase;
font-weight: 600;
}
ul {
list-style: none;
margin-left: 0;
li {
margin-bottom: .5rem;
display: flex;
align-items: center;
}
}
}
}
</style>
```
### With templates
### With recommendations grid