mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 04:59:15 +00:00
Compare commits
7 Commits
pattern-ma
...
kj/first-p
| Author | SHA1 | Date | |
|---|---|---|---|
|
3a0f7751f4 | ||
|
|
b7ed832554 | ||
|
|
aa6a875d01 | ||
|
|
48412f9672 | ||
|
|
cb1f9c8b48 | ||
|
|
2e072fac3b | ||
|
|
bdd4c3ec9a |
@@ -25,7 +25,7 @@ icon: action-panel
|
||||
<h3 class="wa-heading-m">Query with SQL Runner</h3>
|
||||
<p>Access your database to run ad hoc queries.</p>
|
||||
</div>
|
||||
<wa-button variant="brand">New Query</wa-button>
|
||||
<wa-button variant="brand" size="small">New Query</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -46,14 +46,17 @@ icon: action-panel
|
||||
|
||||
## Avatar and Quick actions
|
||||
|
||||
```html{.example}
|
||||
```html {.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 45ch;">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Super Dog</span>
|
||||
<span class="wa-caption-m">Online</span>
|
||||
<div class="wa-caption-m wa-cluster wa-gap-xs">
|
||||
<span>Online</span>
|
||||
<wa-icon name="circle" style="color: var(--wa-color-green); font-size: 10px;"></wa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
|
||||
<wa-icon-button name="microphone" label="audio-input"></wa-icon-button>
|
||||
|
||||
@@ -103,7 +103,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 70ch; margin: auto">
|
||||
<h3 class="wa-heading-l">Monthly Activity</h3>
|
||||
<h3 class="wa-heading-m">Monthly Activity</h3>
|
||||
<div class="wa-stack">
|
||||
<wa-details>
|
||||
<span class="wa-heading-m" slot="summary">
|
||||
@@ -111,7 +111,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" name="envelope" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Email blasts</span>
|
||||
@@ -124,7 +124,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="phone" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" name="phone" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Spoke with the Pope</span>
|
||||
@@ -143,7 +143,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="video" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" name="video" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Zoom Call with Northeast office</span>
|
||||
@@ -156,7 +156,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" name="calendar" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Scheduled birthday party</span>
|
||||
@@ -175,7 +175,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" family="brands" name="intercom" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Got new lead</span>
|
||||
@@ -188,7 +188,7 @@ description: 'Track and organize recent user actions or events.'
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check" fixed-width></wa-icon>
|
||||
<wa-icon style="font-size: var(--wa-font-size-l)" name="list-check" fixed-width></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Completed Todo</span>
|
||||
@@ -203,4 +203,133 @@ description: 'Track and organize recent user actions or events.'
|
||||
</wa-details>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Card Separated
|
||||
```html {.example}
|
||||
<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Isaiah Hamilton</span>
|
||||
<wa-relative-time class="wa-caption-s" date="2025-01-15T09:17:00-04:00"></wa-relative-time>
|
||||
</div>
|
||||
<p>Who's on first?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<div class="wa-flank wa-gap-xl">
|
||||
<wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
|
||||
<ul class="wa-stack">
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Melvin Hurst</span>
|
||||
<wa-relative-time class="wa-caption-s" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
|
||||
</div>
|
||||
<p>What's on second?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<wa-card>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Vanessa Wright</span>
|
||||
</div>
|
||||
<wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Divider Separated
|
||||
```html {.example}
|
||||
<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<div>
|
||||
<span>Notifications</span>
|
||||
<wa-badge appearance="filled" variant="success" pill>2</wa-badge>
|
||||
</div>
|
||||
<wa-icon name="close"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
|
||||
<wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 3:12PM</span>
|
||||
<wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
|
||||
</div>
|
||||
<wa-callout variant="neutral">
|
||||
Really love this approach. I think this is the best solution for the sync issue.
|
||||
</wa-callout>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Charlotte</strong> followed you</span>
|
||||
<wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 3:04PM</span>
|
||||
<wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Profile image"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 2:22PM</span>
|
||||
<wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button appearance="outlined" size="small">Decline</wa-button>
|
||||
<wa-button variant="brand" size="small">Accept</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -13,11 +13,11 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
</div>
|
||||
<wa-textarea aria-labelledby="comment-area-label"></wa-textarea>
|
||||
<div slot="footer" class="wa-cluster" style="justify-content: flex-end">
|
||||
<wa-button appearance="filled">
|
||||
<wa-button appearance="filled" size="small">
|
||||
<wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
|
||||
Attach a file
|
||||
</wa-button>
|
||||
<wa-button variant="brand">Comment</wa-button>
|
||||
<wa-button variant="brand" size="small">Comment</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</form>
|
||||
@@ -109,7 +109,7 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
<div class="wa-frame:portrait wa-border-radius-s">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt=""
|
||||
alt="the cover image for the film"
|
||||
/>
|
||||
</div>
|
||||
<span class="wa-heading-l">Heretic</span>
|
||||
|
||||
@@ -7,34 +7,55 @@ description: 'Convey insights, metrics, and aggregate data at a glance.'
|
||||
## Simple
|
||||
```html {.example}
|
||||
<wa-card>
|
||||
<div class="wa-grid wa-gap-3xl">
|
||||
<div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon name="sack-dollar"></wa-icon>
|
||||
<span>Incomes</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
|
||||
<wa-icon name="arrow-trend-up"></wa-icon>
|
||||
<wa-format-number class="wa-heading-s" type="percent" value=".475"></wa-format-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
<wa-format-number class="wa-heading-xl" type="currency" currency="USD" value="175000000" lang="en-US"></wa-format-number>
|
||||
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon name="credit-card"></wa-icon>
|
||||
<span>Expenses</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-red);">
|
||||
<wa-icon name="arrow-trend-down"></wa-icon>
|
||||
<wa-format-number class="wa-heading-s" type="percent" value=".27"></wa-format-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
<wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="289472" lang="en-US"></wa-format-number>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon name="seedling"></wa-icon>
|
||||
<span>Investments</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
|
||||
<wa-icon name="arrow-trend-up"></wa-icon>
|
||||
<wa-format-number class="wa-heading-s" type="percent" value=".14"></wa-format-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
<wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="569213" lang="en-US"></wa-format-number>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon name="landmark"></wa-icon>
|
||||
<span>Mortgages & Loans</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
<wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="23904" lang="en-US"></wa-format-number>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
@@ -21,7 +21,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
|
||||
```html {.example}
|
||||
<a href="" class="wa-stack wa-align-items-center wa-placeholder wa-link-plain" style="max-width: 60ch; margin: auto">
|
||||
<wa-icon name="ufo-beam" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
|
||||
<wa-icon name="ufo-beam" class="wa-caption-l" family="sharp" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
|
||||
<p class="wa-heading-m">No Custom Icons</p>
|
||||
<p style="text-align: center">Add your own icon or logo to get started.</p>
|
||||
</a>
|
||||
@@ -38,7 +38,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.</p>
|
||||
<div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);">
|
||||
<wa-icon slot="icon" name="note-sticky"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -51,7 +51,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</a>
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-40);">
|
||||
<wa-icon slot="icon" name="list-check"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -64,7 +64,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</a>
|
||||
<a href=""class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);">
|
||||
<wa-icon slot="icon" name="table-cells"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -77,7 +77,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</a>
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);">
|
||||
<wa-icon slot="icon" name="presentation-screen"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -90,7 +90,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</a>
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);">
|
||||
<wa-icon slot="icon" name="pen-field"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -103,7 +103,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</a>
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-40);">
|
||||
<wa-icon slot="icon" name="image"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
@@ -126,28 +126,27 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</wa-card>
|
||||
```
|
||||
## Add people
|
||||
```html{.example}
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<wa-icon></wa-icon>
|
||||
<h1>Add team members</h1>
|
||||
<p>You haven’t added any team members to your project yet. As the owner of this project, you can manage team member permissions.</p>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Add team members</h3>
|
||||
<p>This project is awful lonely. Invite some team members to liven up the joint.</p>
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-input></wa-input><wa-button>Invite</wa-button>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Team members previously added to projects</span>
|
||||
<em class="wa-caption-l">Team members previously added to projects</em>
|
||||
<wa-divider></wa-divider>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
<span class="wa-heading-s">Earl Upton</span>
|
||||
<span class="wa-caption-m">DevOps</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -156,14 +155,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" lable="profile image"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
<span class="wa-heading-s">Steamboat Willie</span>
|
||||
<span class="wa-caption-m">Captain</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -172,14 +171,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1678582967399-bf558533f5eb?q=80&w=3029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
<span class="wa-heading-s">Melissa Eckers</span>
|
||||
<span class="wa-caption-m">Cloud Engineer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -187,14 +186,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
<wa-divider></wa-divider>
|
||||
</section><section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
<span class="wa-heading-s">Devin Shears</span>
|
||||
<span class="wa-caption-m">UX Writer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user-plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -74,7 +74,7 @@ description: 'Empower users to learn more with a structured list of questions an
|
||||
</div>
|
||||
```
|
||||
|
||||
## 3 Column
|
||||
## Multiple Columns
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
|
||||
@@ -1,287 +0,0 @@
|
||||
---
|
||||
title: Feed
|
||||
description: TODO
|
||||
---
|
||||
|
||||
## Comment Section
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<h1 class="wa-heading-m">Activity</h1>
|
||||
<wa-textarea></wa-textarea>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div>
|
||||
<span class="wa-heading-s">Robert Fox</span>
|
||||
<span class="wa-caption-m">commented 32 min ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="wa-stack wa-gap-xl" style="list-style-type: none; margin-inline-start: 1em;">
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div>
|
||||
<span>Robert Fox</span>
|
||||
<span class="wa-caption-m">commented 32 min ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
|
||||
</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div>
|
||||
<span>Robert Fox</span>
|
||||
<span class="wa-caption-m">commented 32 min ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
|
||||
</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="reply"></wa-icon>
|
||||
<a href="#">Leave Comment</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With Summary Components
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 68ch; margin: 0 auto;">
|
||||
<h1 class="wa-heading-l">Monthly Activity</h1>
|
||||
<div class="wa-stack">
|
||||
<wa-details>
|
||||
<span class="wa-heading-m" slot="summary">
|
||||
February
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<section class="wa-flank wa-gap-xs">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Email blasts</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Feb 28th</span>
|
||||
</div>
|
||||
</section>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-flank wa-gap-xs">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="phone"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Spoke with the Pope</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">Artur Fleck</a><span>for 1 hour</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Feb 23rd</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</wa-details>
|
||||
<wa-details>
|
||||
<span class="wa-heading-m" slot="summary">
|
||||
March
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<section class="wa-flank wa-gap-xs">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="video"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Zoom Call with Northeast office</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">Axel Foley</a><span>for 47 minutes</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Mar 15th</span>
|
||||
</div>
|
||||
</section>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-flank wa-gap-s">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Scheduled birthday party</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Mar 3rd</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</wa-details>
|
||||
<wa-details>
|
||||
<span class="wa-heading-m" slot="summary">
|
||||
April
|
||||
</span>
|
||||
<div class="wa-stack">
|
||||
<section class="wa-flank wa-gap-s">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Got new lead</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">Jack Carter</a><span>on Intercom switchboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Apr 18th</span>
|
||||
</div>
|
||||
</section>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-flank wa-gap-s">
|
||||
<wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-s">Completed Todo</span>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-caption-m">Apr 2nd</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</wa-details>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Card Separated
|
||||
```html{.example}
|
||||
<div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
<span class="wa-caption-s">4h</span>
|
||||
</div>
|
||||
<p>Who's on first?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<div class="wa-flank wa-gap-xl">
|
||||
<wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
|
||||
<ul class="wa-stack">
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
<span class="wa-caption-s">1h</span>
|
||||
</div>
|
||||
<p>What's on second?</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon name="reply"></wa-icon>
|
||||
<span>Reply</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<wa-card>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Charlotte Parker</span>
|
||||
</div>
|
||||
<wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
## Divider Separated
|
||||
```html{.example}
|
||||
<wa-card with-header style="max-width: 54ch; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<div>
|
||||
<span>Notifications</span>
|
||||
<wa-badge appearance="filled" variant="success" pill>2</wa-badge>
|
||||
</div>
|
||||
<wa-icon name="close"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
|
||||
<wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 3:12PM</span>
|
||||
<span class="wa-caption-m">2 hours ago</span>
|
||||
</div>
|
||||
<wa-callout variant="neutral">
|
||||
Really love this approach. I think this is the best solution for the sync issue.
|
||||
</wa-callout>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Charlotte</strong> followed you</span>
|
||||
<wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 3:04PM</span>
|
||||
<span class="wa-caption-m">2 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split">
|
||||
<span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
|
||||
</div>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m">Friday 2:22PM</span>
|
||||
<span class="wa-caption-m">3 hours ago</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button appearance="outlined" size="small">Decline</wa-button>
|
||||
<wa-button variant="brand" size="small">Accept</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -130,17 +130,17 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</div>
|
||||
```
|
||||
|
||||
## Cards with Footer Actions
|
||||
## Cards with Footer Actions & Large Image
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 29ch;">
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-circle">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<h2 class="wa-heading-m">Scott Summers</h2>
|
||||
<p class="wa-caption-l">Product Designer</p>
|
||||
<p class="wa-caption-l">DevOps</p>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
@@ -154,12 +154,12 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-circle">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<h2 class="wa-heading-m">Scott Summers</h2>
|
||||
<p class="wa-caption-l">Product Designer</p>
|
||||
<h2 class="wa-heading-m">Kaitlin Moore</h2>
|
||||
<p class="wa-caption-l">Systems Engineer</p>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
@@ -173,12 +173,12 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-circle">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<h2 class="wa-heading-m">Scott Summers</h2>
|
||||
<p class="wa-caption-l">Product Designer</p>
|
||||
<h2 class="wa-heading-m">Nessa Riley</h2>
|
||||
<p class="wa-caption-l">Cloud Engineer</p>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
@@ -192,12 +192,12 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-circle">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<h2 class="wa-heading-m">Scott Summers</h2>
|
||||
<p class="wa-caption-l">Product Designer</p>
|
||||
<h2 class="wa-heading-m">Veronica Staley</h2>
|
||||
<p class="wa-caption-l">Machine Learning Engineer</p>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
@@ -216,81 +216,81 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Jeff Hanks</span>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Allen Bryant</span>
|
||||
<span>Staff Engineer</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Mariah Greene</span>
|
||||
<span>DevOps</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Beverly Winslow</span>
|
||||
<span>Design Systems Lead</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Eric Masterson</span>
|
||||
<span>Copy Writer</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa-stack">
|
||||
<div class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</span>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span>Stephen Coffee</span>
|
||||
<span>Visual Designer</span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bluesky" family="brands"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands"></wa-icon-button>
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
|
||||
<wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -418,8 +418,8 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-badge appearance="outlined" pill>DevOps</wa-badge> <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a gray tabby kitten looking down"></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
label="profile image"></wa-avatar>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-button appearance="plain">
|
||||
@@ -451,8 +451,8 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-badge appearance="outlined" pill>Design</wa-badge> <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a gray tabby kitten looking down"></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
label="profile image"></wa-avatar>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
@@ -474,7 +474,7 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
<wa-badge appearance="outlined" pill>Design</wa-badge> <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-button appearance="plain">
|
||||
|
||||
@@ -9,29 +9,29 @@ description: 'Encourage shoppers to buy your products with value propositions, d
|
||||
<div class="wa-gap-3xl wa-stack" style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-align-items-center wa-grid">
|
||||
<div>
|
||||
<span class="wa-heading-xl">Get the Best Instruction from our Educators.</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>
|
||||
<span class="wa-heading-xl">Unlock your Superpower</span>
|
||||
<p class="wa-caption-l">Web development is like a superpower—you can turn your ideas into actual products online, and learning it from home means you don’t need a fancy degree or expensive tuition to start building your future.</p>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://uploads.webawesome.com/online-learning.jpg" />
|
||||
<img src="https://images.unsplash.com/photo-1551981878-4c70c3e64135?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="stopwatch" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Learn at your Speed</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>
|
||||
<wa-icon name="briefcase" variant="light" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Career Opportunities</span>
|
||||
<p class="wa-caption-m">Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or app.</p>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="chart-line" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Track Progress</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>
|
||||
<wa-icon name="laptop-code" variant="light" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Flexibility of Online Learning</span>
|
||||
<p class="wa-caption-m">Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes</p>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="people-group" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Active Community</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>
|
||||
<wa-icon name="palette" variant="light" style="font-size: 32px;"></wa-icon>
|
||||
<span class="wa-heading-s">Creative & Practical Skillset</span>
|
||||
<p class="wa-caption-m">You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,7 +39,7 @@ description: 'Encourage shoppers to buy your products with value propositions, d
|
||||
## 2 Column with Cards
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid" style="--min-column-size: 41ch;">
|
||||
<div class="wa-grid" style="--min-column-size: 24ch;">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div>
|
||||
@@ -97,26 +97,26 @@ description: 'Encourage shoppers to buy your products with value propositions, d
|
||||
|
||||
```html{.example}
|
||||
<div>
|
||||
<div class="wa-grid">
|
||||
<div class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="magnifying-glass" style="font-size: 32px;"></wa-icon>
|
||||
<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>
|
||||
<wa-icon family="duotone" name="magnifying-glass" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
|
||||
<span class="wa-heading-s">In-Demand Skills</span>
|
||||
<p class="wa-caption-m">Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.</p>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="chalkboard-user" style="font-size: 32px;"></wa-icon>
|
||||
<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>
|
||||
<wa-icon family="duotone" name="chalkboard-user" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
|
||||
<span class="wa-heading-s">Learn Anytime, Anywhere</span>
|
||||
<p class="wa-caption-m">Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.</p>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="people-arrows" style="font-size: 32px;"></wa-icon>
|
||||
<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>
|
||||
<wa-icon family="duotone" name="people-arrows" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
|
||||
<span class="wa-heading-s">Build and Launch Your Own Projects</span>
|
||||
<p class="wa-caption-m">You’re not just learning theory—you’re creating real, functional websites and apps.</p>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-icon name="code" style="font-size: 32px;"></wa-icon>
|
||||
<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>
|
||||
<wa-icon family="duotone" name="code" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
|
||||
<span class="wa-heading-s">Low-Cost Entry</span>
|
||||
<p class="wa-caption-m">You don’t need a tech degree or expensive tools to get started</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -193,12 +193,14 @@ description: 'Empower your customers to view past purchases and track upcoming o
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon family="brands" name="amazon"></wa-icon>
|
||||
<wa-avatar shape="rounded" label="Avatar with an image icon">
|
||||
<wa-icon slot="icon"family="brands" name="amazon"></wa-icon>
|
||||
</wa-avatar>
|
||||
<span class="wa-heading-s">Amazon</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>Expected Tomorrow</span>
|
||||
<wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
|
||||
<wa-progress-bar value="75" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
|
||||
@@ -210,16 +212,18 @@ description: 'Empower your customers to view past purchases and track upcoming o
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon family="brands" name="amazon"></wa-icon>
|
||||
<span class="wa-heading-s">Amazon</span>
|
||||
<wa-avatar shape="rounded" label="Avatar with an image icon">
|
||||
<wa-icon slot="icon" family="sharp" variant="light" name="shirt"></wa-icon>
|
||||
</wa-avatar>
|
||||
<span class="wa-heading-s">T-shirt Depot</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>Expected Tomorrow</span>
|
||||
<wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
|
||||
<span>Out for Delivery</span>
|
||||
<wa-progress-bar value="95" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
|
||||
<img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
@@ -227,16 +231,18 @@ description: 'Empower your customers to view past purchases and track upcoming o
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-icon family="brands" name="amazon"></wa-icon>
|
||||
<span class="wa-heading-s">Amazon</span>
|
||||
<wa-avatar shape="rounded" label="Avatar with an image icon">
|
||||
<wa-icon slot="icon" variant="duotone" name="gamepad-modern"></wa-icon>
|
||||
</wa-avatar>
|
||||
<span class="wa-heading-s">Game Theory</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>Expected Tomorrow</span>
|
||||
<wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
|
||||
<span>Shipping Soon</span>
|
||||
<wa-progress-bar value="15" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
|
||||
<img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
<img src="https://images.unsplash.com/photo-1627421383054-488d9c9828f5?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
@@ -11,13 +11,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Viktor Vaughn</span>
|
||||
<span class="wa-caption-m"><em>September 23rd, 2023</em></span>
|
||||
<wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-rating label="Rating" readonly value="5"></wa-rating>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Rating Title</span>
|
||||
<p class="wa-caption-m">Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
|
||||
<span class="wa-heading-s">Solid treadmill for home workouts!</span>
|
||||
<p>Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,13 +25,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Ben Grimm</span>
|
||||
<span class="wa-caption-m"><em>May 5th, 2023</em></span>
|
||||
<wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-rating label="Rating" readonly value="4"></wa-rating>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Rating Title</span>
|
||||
<p class="wa-caption-m">Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
|
||||
<span class="wa-heading-s">Good value, a few minor flaws</span>
|
||||
<p>Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,13 +39,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Johnny Storm</span>
|
||||
<span class="wa-caption-m"><em>March 3rd, 2023</em></span>
|
||||
<wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-rating label="Rating" readonly value="4"></wa-rating>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Rating Title</span>
|
||||
<p class="wa-caption-m">This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
|
||||
<span class="wa-heading-s">Decent, but could use upgrades</span>
|
||||
<p>This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,13 +53,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<div class="wa-flank wa-gap-s" style="--flank-size: 20%">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Sue Storm</span>
|
||||
<span class="wa-caption-m"><em>February 26th, 2023</em></span>
|
||||
<wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-rating label="Rating" readonly value="4"></wa-rating>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Rating Title</span>
|
||||
<p class="wa-caption-m">I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
|
||||
<span class="wa-heading-s">Perfect for small spaces</span>
|
||||
<p>I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,31 +78,31 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<span>5</span>
|
||||
<wa-icon name="star" style="font-size: 12px;"></wa-icon>
|
||||
<wa-progress-bar value="63" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
|
||||
<span>63%</span>
|
||||
<wa-format-number type="percent" value=".63"></wa-format-number>
|
||||
</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<span>4</span>
|
||||
<wa-icon name="star" style="font-size: 12px;"></wa-icon>
|
||||
<wa-progress-bar value="17" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
|
||||
<span>17%</span>
|
||||
<wa-format-number type="percent" value=".17"></wa-format-number>
|
||||
</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<span>3</span>
|
||||
<wa-icon name="star" style="font-size: 12px;"></wa-icon>
|
||||
<wa-progress-bar value="15" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
|
||||
<span>15%</span>
|
||||
<wa-format-number type="percent" value=".15"></wa-format-number>
|
||||
</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<span>2</span>
|
||||
<wa-icon name="star" style="font-size: 12px;"></wa-icon>
|
||||
<wa-progress-bar value="3" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
|
||||
<span>3%</span>
|
||||
<wa-format-number type="percent" value=".03"></wa-format-number>
|
||||
</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<span>1</span>
|
||||
<wa-icon name="star" style="font-size: 12px;"></wa-icon>
|
||||
<wa-progress-bar value="2" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
|
||||
<span>2%</span>
|
||||
<wa-format-number type="percent" value=".02"></wa-format-number>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,44 +111,44 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Emily Selman</span>
|
||||
<span class="wa-heading-s">Michelle Jasper</span>
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
|
||||
<p>I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend for anyone growing indoors!</p>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Emily Selman</span>
|
||||
<span class="wa-heading-s">Doug Michaels</span>
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
|
||||
<p>This light really helps my plants grow during the winter months. The brightness is strong, and I love the adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the price!</p>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=2561&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Emily Selman</span>
|
||||
<span class="wa-heading-s">Stephanie Hurst</span>
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
|
||||
<p>I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too harsh on the eyes</p>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Emily Selman</span>
|
||||
<span class="wa-heading-s">Miles Rogers</span>
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
|
||||
<p>I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies and spider plants are growing beautifully. I just wish it came in more color options for the stand, but performance-wise, it’s excellent.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,8 +164,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<p>Ripley</p>
|
||||
<div>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -180,8 +180,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<p>Kane</p>
|
||||
<div>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -196,8 +196,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
|
||||
<wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<p>Parker</p>
|
||||
<div>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
|
||||
<wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: Call To Action
|
||||
description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Simple
|
||||
```html {.example}
|
||||
<div style="margin-block: 5rem;">
|
||||
<h2 style="font-size: 3rem;">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Centered
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: 5rem;">
|
||||
<h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 2 Column
|
||||
```html {.example}
|
||||
<div style="margin-block: 5rem;">
|
||||
<div class="wa-grid wa-align-items-center">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-3xl">
|
||||
<h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1586864387634-2f33030dab41?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```
|
||||
@@ -1,87 +0,0 @@
|
||||
---
|
||||
title: Footer
|
||||
description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
## Simple
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-gap-xl" style="max-width: 102ch; margin: 0 auto;">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster wa-gap-xs wa-heading-xl">
|
||||
<wa-icon name="gears"></wa-icon>
|
||||
<span>Widget UI</span>
|
||||
</div>
|
||||
<form class="wa-flank:end wa-gap-xs">
|
||||
<wa-input placeholder="Enter your email" type="email"></wa-input>
|
||||
<wa-button>Subscribe</wa-button>
|
||||
</form>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-cluster" style="justify-content: flex-end">
|
||||
<p>© 2025 All Rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
## Centered
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-cluster wa-gap-xl">
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Get Started</a>
|
||||
<a href="#">Services</a>
|
||||
<a href="#">Portfolio</a>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
|
||||
</div>
|
||||
<p>© 2025 All Rights reserved.</p>
|
||||
</div>
|
||||
```
|
||||
## Corporate
|
||||
```html{.example}
|
||||
<div>
|
||||
<div class="wa-flank wa-align-items-baseline wa-gap-3xl" style="--flank-size: 36ch;">
|
||||
<div>
|
||||
<p>We are committed to providing you with the best products and services. If you have any questions or need assistance, feel free to reach out to our team. Stay connected with us through our social media channels for updates, news, and more. Your satisfaction is our top priority, and we look forward to serving you again soon!</p>
|
||||
</div>
|
||||
<div class="wa-grid">
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h2 class="wa-heading-s">Links</h2>
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Get Started</a>
|
||||
<a href="#">Services</a>
|
||||
<a href="#">Portfolio</a>
|
||||
</section>
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h2 class="wa-heading-s">Others</h2>
|
||||
<a href="#">Corporate</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</section>
|
||||
<section class="wa-stack">
|
||||
<h2 class="wa-heading-s">Social</h2>
|
||||
<div class="wa-cluster">
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
|
||||
<a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<p>© 2025 All Rights reserved.</p>
|
||||
<wa-select label="Language" value="english">
|
||||
<wa-option value="english">English</wa-option>
|
||||
<wa-option value="spanish">Spanish</wa-option>
|
||||
<wa-option value="french">French</wa-option>
|
||||
</wa-select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Information
|
||||
description: ''
|
||||
parent: patterns
|
||||
layout: overview
|
||||
override:tags: []
|
||||
listChildren: true
|
||||
---
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"tags": ["information"]
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
title: Login
|
||||
description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Login/ Sign Up
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 45ch; margin: 0 auto">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Agent Login</h2>
|
||||
<wa-input placeholder="email" type="email"></wa-input>
|
||||
<wa-input placeholder="password" type="password"></wa-input>
|
||||
<a href="#">Having trouble signing in?</a>
|
||||
<wa-button>Sign in</wa-button>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
<p>Or sign in with:</p>
|
||||
<div class="wa-grid" style="--min-column-size: 12ch;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="google" family="brands"></wa-icon>
|
||||
Google
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="apple" family="brands"></wa-icon>
|
||||
Apple ID
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="facebook" family="brands"></wa-icon>
|
||||
Facebook
|
||||
</wa-button>
|
||||
</div>
|
||||
<p>Don't have an account? <a href="#">Request Now</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Password Recovery
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 45ch; margin: 0 auto">
|
||||
<div class="wa-stack wa-gap-l">
|
||||
<h2 class="wa-heading-m">Password Recovery</h2>
|
||||
<wa-radio-group
|
||||
label="Choose your recovery method"
|
||||
orientation="horizontal"
|
||||
name="recovery-method"
|
||||
value="crypto-keys"
|
||||
>
|
||||
<wa-radio-button value="qr-code">QR Code</wa-radio-button>
|
||||
<wa-radio-button value="crypto-keys">Crypto Keys</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<p class="wa-caption-m">Store your keys in a password manager to back them up in case you need to restore your account.</p>
|
||||
<div class="wa-stack">
|
||||
<wa-input label="Public Key" value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
|
||||
<wa-input label="Secret Key" value="dfkdfkdfdsofkdsofjs" disabled></wa-input>
|
||||
</div>
|
||||
<wa-button>Submit</wa-button>
|
||||
<wa-button appearance="outlined">Or try to login again</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Two Factor Authentication
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 45ch; margin: 0 auto">
|
||||
<div class="wa-stack wa-gap-l wa-align-items-center">
|
||||
<h2 class="wa-heading-m">Set up using an Authenticator app</h2>
|
||||
<p class="wa-caption-m">Use an authenticator app to get the authentication codes</p>
|
||||
<wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
|
||||
<p class="wa-caption-m">If you can't scan the QR Code above, enter this text instead</p>
|
||||
<wa-input value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
|
||||
<h3 class="wa-heading-s">Set up using an Authenticator app</h3>
|
||||
<p class="wa-caption-m">After scanning the QR Code image, the app will display a code that you can enter.</p>
|
||||
<span class="wa-heading-3xl">123466</span>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -1,110 +0,0 @@
|
||||
---
|
||||
title: Newsletter
|
||||
description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Simple
|
||||
```html{.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 45ch;">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
|
||||
<p>To get the latest and most quality design resources</p>
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button>Subscribe</wa-button>
|
||||
</form>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## 2 Column
|
||||
```html{.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 75ch;">
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
|
||||
<p>To get the latest and most quality design resources</p>
|
||||
</div>
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button>Subscribe</wa-button>
|
||||
</form>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With Incentives
|
||||
```html {.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 75ch;">
|
||||
<div class="wa-grid">
|
||||
<dl class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<dt><wa-icon name="calendar"></wa-icon></dt><dd>Daily News in your Inbox</dd>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Spam Free</dd>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<dt><wa-icon name="shield-halved"></wa-icon></dt><dd>The Most trusted source in the industry.</dd>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Easy to Unsubscribe</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
|
||||
<p>To get the latest and most quality design resources</p>
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button>Subscribe</wa-button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With Image card
|
||||
```html{.example}
|
||||
<wa-card with-image style="max-width: 45ch; margin: 0 auto">
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="mailbox" />
|
||||
<div class="wa-stack wa-align-items-center wa-gap-2xl">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs">
|
||||
<h2 class="wa-heading-l">Subscribe!</h2>
|
||||
<p class="wa-caption-l" style="text-align: center; word-break: break-word">Get the best new products in your inbox, everyday. Get the latest content first.</p>
|
||||
</div>
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button appearance="outlined">Signup</wa-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## 2 column
|
||||
```html{.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 84ch;">
|
||||
<div class="wa-grid wa-align-items-center">
|
||||
<form class="wa-stack wa-align-items-center wa-gap-2xl">
|
||||
<h2 class="wa-heading-xl" style="text-align: center;">Be the first to know</h2>
|
||||
<p class="wa-caption-xl" style="text-align: center;">Don't miss out on exclusive savings, new arrivals, and more.</p>
|
||||
<div class="wa-stack">
|
||||
<wa-input placeholder="email address (required)"></wa-input>
|
||||
<wa-input type="tel" placeholder="phone number (optional)"></wa-input>
|
||||
<wa-checkbox>
|
||||
<p class="wa-caption-s" style="margin: 0"> Enter your mobile number and select to receive automated marketing text messages about new items, great savings and more. You understand that consent is not required to make a purchase. Message and data rates may apply. Message frequency varies. Wireless Carriers are not liable for delayed or undelivered messages. Text HELP for help and STOP to cancel.
|
||||
For questions, Please <a href="#">contact us</a>. <a href="#">Terms</a></div>
|
||||
</wa-checkbox>
|
||||
</div>
|
||||
<div class="wa-stack wa-align-items-center wa-gap-s">
|
||||
<wa-button appearance="outlined">Sign up now</wa-button>
|
||||
<a href="#">no, thanks</a>
|
||||
</div>
|
||||
</form>
|
||||
<div class="wa-frame:portrait wa-border-radius-l">
|
||||
<img src="https://images.unsplash.com/photo-1552558636-f6a8f071c2b3?q=80&w=2268&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -1,122 +0,0 @@
|
||||
---
|
||||
title: Paywall
|
||||
description: ''
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Meter
|
||||
```html {.example}
|
||||
<div style="max-width: 45ch; margin: 0 auto;">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-80); --text-color: var(--wa-color-purple-40)">
|
||||
<wa-icon slot="icon" name="newspaper" family="regular"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-caption-m">You've read <span style="font-weight: var(--wa-font-weight-bold);">9 out of 10 articles</span> this month.</p>
|
||||
<p>Already a subscriber? <a href="#">Log in here</a>.</p>
|
||||
<a href="#">Get Unlimited access for just 99¢</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
## Modal
|
||||
|
||||
```html {.example viewport}
|
||||
<div style="position: relative;">
|
||||
|
||||
<div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
|
||||
<h2>The Great Gatsby</h2>
|
||||
<p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
|
||||
<p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
|
||||
<p>He didn’t say any more but we’ve always been unusually
|
||||
communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
|
||||
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
|
||||
</div>
|
||||
<div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
|
||||
<wa-card style="max-width: 84ch;margin: 10% auto 0;">
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<h2 class="wa-heading-m">Want to subscribe or continue using our Products for free with ads?</h2>
|
||||
<p>Laws are changing in your region, so we're introducing a new choice about how we use your info for ads. You'll learn more about what each option means for you before you confirm your choice.</p>
|
||||
<p>Your choice will apply to the <a href="#">accounts in this Accounts Center</a>.</p>
|
||||
<div class="wa-grid">
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<span class="wa-heading-s">Subscribe without ads</span>
|
||||
<p>Subscribe to our accounts without ads, starting at 5.99/month (inclusive of applicable taxes). Your info won't be use for ads.</p>
|
||||
<wa-button variant="success">Subscribe</wa-button>
|
||||
</article>
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<span class="wa-heading-s">Free with ads</span>
|
||||
|
||||
<p>Discover products and brands through personalized ads, while using your accounts for free. Your info will be used for ads</p>
|
||||
<wa-button appearance="outlined">Use for Free</wa-button>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Footer
|
||||
|
||||
```html {.example viewport}
|
||||
<div style="position: relative;">
|
||||
<div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
|
||||
<h2>The Great Gatsby</h2>
|
||||
<p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
|
||||
<p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
|
||||
<p>He didn’t say any more but we’ve always been unusually
|
||||
communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
|
||||
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
|
||||
</div>
|
||||
<div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
|
||||
<wa-card class="wa-border-radius-square" style="width: 75%;position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
|
||||
<div>
|
||||
<h2 class="wa-heading-m">You've hit your free article limit.</h2>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<span class="wa-heading-s">Standard Digital</span>
|
||||
<span class="wa-heading-xl">$45/month</span>
|
||||
<p>Essential digital access to quality journalism on any device. Makes a great gift.</p>
|
||||
<wa-button size="small" variant="brand">Select</wa-button>
|
||||
<a href="#">What's Included?</a>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<span class="wa-heading-s">Premium Digital</span>
|
||||
<span class="wa-heading-xl">$75/month</span>
|
||||
<p>Complete digital access to quality journalism with expert analysis from industry leaders.</p>
|
||||
<wa-button size="small" variant="brand">Select</wa-button>
|
||||
<a href="#">What's Included?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
<!-- ### Paywall
|
||||
|
||||
```html {.example viewport}
|
||||
<div>
|
||||
<wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
|
||||
<wa-button href="#">Register</wa-button>
|
||||
Already a subscriber? <a href="#">Login</a>
|
||||
</wa-dialog>
|
||||
|
||||
<wa-button>Open Paywall</wa-button>
|
||||
|
||||
<script>
|
||||
const dialog = document.querySelector('.dialog-header');
|
||||
const openButton = dialog.nextElementSibling;
|
||||
|
||||
openButton.addEventListener('click', () => dialog.open = true);
|
||||
</script>
|
||||
|
||||
</div>
|
||||
``` -->
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
title: Post List
|
||||
description: ''
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Text Based
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-gap-2xl" style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-split">
|
||||
<h2 class="wa-heading-l">Trending Articles</h2>
|
||||
<span class="wa-cluster">
|
||||
<wa-icon name="search"></wa-icon>
|
||||
<a href="#">See all</a>
|
||||
</span>
|
||||
</div>
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Worst Idioms</a></h3>
|
||||
<span class="wa-caption-m">by <strong><em><a href="#">Paisley Darts</a></em></strong> • 4 min</span>
|
||||
</section>
|
||||
<p>"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Boost Your Productivity with These 5 Simple Habits</a></h3>
|
||||
<span class="wa-caption-m">by <strong><em><a href="#">Michael Sur</a></em></strong> • 3 min</span>
|
||||
</section>
|
||||
<p>Small changes, big results—master the art of productivity in your daily routine.</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Why Sustainable Fashion Is the Future of the Industry</a></h3>
|
||||
<span class="wa-caption-m">by <strong><em><a href="#">Stacy Magnolia</a></em></strong> • 7 min</span>
|
||||
</section>
|
||||
<p>From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
|
||||
<a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
|
||||
<wa-divider></wa-divider>
|
||||
</article>
|
||||
</div>
|
||||
```
|
||||
## Single Column with Images
|
||||
```html {.example}
|
||||
<div class="wa-stack" style="max-width: 78ch; margin: 0 auto;">
|
||||
<div class="wa-split">
|
||||
<h2 class="wa-heading-l">Trending Articles</h2>
|
||||
<span class="wa-cluster">
|
||||
<wa-icon name="search"></wa-icon>
|
||||
<a href="#">See all</a>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<article class="wa-flank:end wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<h3 class="wa-heading-m">Worst Idioms <span class="wa-caption-s">4 min</span></h3>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
|
||||
<span class="wa-caption-m">by <a href="#"><strong><em>Paisley Darts</em></strong></a></span>
|
||||
</div>
|
||||
<wa-tag size="small" appearance="filled">Opinion</wa-tag>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="width: 10ch;">
|
||||
<img src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank:end wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<h3 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits <span class="wa-caption-s">3 min</span></h3>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-caption-l">"Small changes, big results—master the art of productivity in your daily routine.</p>
|
||||
<span class="wa-caption-m">by <a href="#"><strong><em>Michael Sur</em></strong></a></span>
|
||||
</div>
|
||||
<div class="wa-cluster">
|
||||
<wa-tag size="small" appearance="filled">Self Improvement</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="width: 10ch;">
|
||||
<img src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank:end wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<h3 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry <span class="wa-caption-s">7 min</span></h3>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
|
||||
<span class="wa-caption-m">by <a href="#"><strong><em>Stacy Magnolia</em></strong></a></span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag size="small" appearance="filled">Style</wa-tag><wa-tag size="small" appearance="filled">Environmental</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="width: 10ch;">
|
||||
<img src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
<article class="wa-flank:end wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-s wa-align-items-start">
|
||||
<h3 class="wa-heading-m">The Power of Mindfulness <span class="wa-caption-s">5 min</span></h3>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
|
||||
<span class="wa-caption-m">by <a href="#"><strong><em>Desean Ivy</em></strong></a></span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag size="small" appearance="filled">Meditation</wa-tag><wa-tag size="small" appearance="filled">Self Care</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-m" style="width: 10ch;">
|
||||
<img src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
||||
</div>
|
||||
</article>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
## With Image Card
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-align-items-center" style="max-width: 105ch; margin: 0 auto;">
|
||||
<h2 class="wa-heading-l">Trending Articles</h2>
|
||||
<wa-input placeholder="Search Articles">
|
||||
<wa-icon name="search" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-grid" style="--min-column-size: 40ch;">
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Worst Idioms</h2>
|
||||
<p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Paisley Darts</span>
|
||||
<span class="wa-caption-s">March 12th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits</h2>
|
||||
<p class="wa-caption-l">Small changes, big results—master the art of productivity in your daily routine.</p>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Michael Sur</span>
|
||||
<span class="wa-caption-s">March 13th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry</h2>
|
||||
<p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Stacy Magnolia</span>
|
||||
<span class="wa-caption-s">March 14th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">The Power of Mindfulness</h2>
|
||||
<p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Desean Ivy</span>
|
||||
<span class="wa-caption-s">March 12th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" style="text-align: center;">See All</a>
|
||||
</div>
|
||||
```
|
||||
@@ -1,101 +0,0 @@
|
||||
---
|
||||
title: Social Share
|
||||
description: 'Allow users to easily share content with social networks and platform.'
|
||||
parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Horizontal
|
||||
```html{.example}
|
||||
<wa-card style="max-width: fit-content; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<span class="wa-heading-s">Share Video</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Embed</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Facebook</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Bluesky</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">LinkedIn</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Email</span>
|
||||
</span>
|
||||
</div>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="link"></wa-icon>
|
||||
Copy Link
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Vertical
|
||||
```html{.example}
|
||||
<wa-card class="wa-border-radius-pill" style="max-width: 8ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Embed</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="facebook" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Facebook</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="bluesky" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Bluesky</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="LinkedIn" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">LinkedIn</span>
|
||||
</span>
|
||||
<span class="wa-align-items-center wa-stack wa-gap-2xs">
|
||||
<wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="email" href="#" target="_blank"></wa-icon-button>
|
||||
<span class="wa-caption-s">Email</span>
|
||||
</span>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With Image Card
|
||||
```html {.example}
|
||||
<wa-card with-image style="max-width: 45ch; margin: 0 auto;">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Super special awesome trophy"
|
||||
/>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-2xs wa-align-items-center">
|
||||
<h2 class="wa-heading-l">Flawless!</h2>
|
||||
<span class="wa-caption-l">
|
||||
10 of 10</span>
|
||||
</div>
|
||||
<p style="text-align: center;">You got a perfect score in this section. Tell your friends, family, really... just anyone who will listen.</p>
|
||||
<div class="wa-cluster" style="margin-top: var(--wa-font-size-xl);">
|
||||
<wa-avatar label="Avatar with an image icon">
|
||||
<wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
|
||||
</wa-avatar>
|
||||
<wa-avatar label="Avatar with an image icon">
|
||||
<wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
|
||||
</wa-avatar>
|
||||
<wa-avatar label="Avatar with an image icon">
|
||||
<wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="instagram" family="brands" label="Share on Instagram" href="#" target="_blank"></wa-icon-button>
|
||||
</wa-avatar>
|
||||
<wa-avatar label="Avatar with an image icon">
|
||||
<wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
|
||||
</wa-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
Reference in New Issue
Block a user