mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Merge pull request #859 from shoelace-style/kj/patterns-home-stretch
Kj/patterns home stretch
This commit is contained in:
Kelsey Jackson
@@ -7,11 +7,11 @@ icon: action-panel
|
||||
## Simple
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 70ch; margin: auto">
|
||||
<wa-card style="max-width: 60ch; margin: auto">
|
||||
<div class="wa-stack wa-align-items-start">
|
||||
<h3 class="wa-heading-m">New Dashboard</h3>
|
||||
<p>Arrange your data into a single view to monitor trends and track performance.</p>
|
||||
<wa-button variant="brand">Build Dashboard</wa-button>
|
||||
<wa-button variant="brand" size="small">Build Dashboard</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -19,7 +19,7 @@ icon: action-panel
|
||||
## With Flanked Button
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 70ch; margin: auto">
|
||||
<wa-card style="max-width: 60ch; margin: auto">
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Query with SQL Runner</h3>
|
||||
@@ -43,3 +43,24 @@ icon: action-panel
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Avatar and Quick actions
|
||||
|
||||
```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">
|
||||
<span class="wa-heading-s">Super Dog</span>
|
||||
<span class="wa-caption-m">Online</span>
|
||||
</div>
|
||||
<div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
|
||||
<wa-icon-button name="microphone" label="audio-input"></wa-icon-button>
|
||||
<wa-icon-button name="headphones" label="audio-output"></wa-icon-button>
|
||||
<wa-icon-button name="gear" label="settings"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -48,7 +48,7 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
<ul class="wa-stack">
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<wa-avatar initials="VF" label="User avatar"></wa-avatar>
|
||||
<div class="wa-cluster">
|
||||
<strong>Virginia Woolf</strong>
|
||||
<span class="wa-caption-m">commented <wa-relative-time date="2025-03-31T12:32:00-04:00"></wa-relative-time></span>
|
||||
@@ -58,7 +58,7 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
</li>
|
||||
<li class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<wa-avatar initials="CV" label="User avatar"></wa-avatar>
|
||||
<div class="wa-cluster">
|
||||
<strong>Clarissa Vaughan</strong>
|
||||
<span class="wa-caption-m">commented <wa-relative-time></wa-relative-time></span>
|
||||
@@ -135,3 +135,30 @@ description: 'Enable users to engage in discussions, provide feedback, or record
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## With Preview Pane
|
||||
```html{.example}
|
||||
<div style="max-width: 60ch; margin: 0 auto;">
|
||||
<wa-card class="wa-border-radius-square" with-footer>
|
||||
<h3 class="wa-heading-m">Add a comment</h3>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="write">Write</wa-tab>
|
||||
<wa-tab panel="preview">Preview</wa-tab>
|
||||
<wa-tab-panel name="write">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-xs" style="justify-content: flex-end;">
|
||||
<wa-icon-button name="link" label="add link"></wa-icon-button>
|
||||
<wa-icon-button name="at" label="mention collaborator"></wa-icon-button>
|
||||
<wa-icon-button name="hashtag" label="change heading"></wa-icon-button>
|
||||
</div>
|
||||
<wa-textarea aria-label="Add a comment"></wa-textarea>
|
||||
</div>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="preview">Your content will render here.</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
<div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
|
||||
<wa-button appearance="outlined" size="small">Post</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
</div>
|
||||
```
|
||||
@@ -3,8 +3,44 @@ title: Data Display
|
||||
description: 'Convey insights, metrics, and aggregate data at a glance.'
|
||||
---
|
||||
|
||||
## Cards with Avatars
|
||||
|
||||
## Simple
|
||||
```html {.example}
|
||||
<wa-card>
|
||||
<div class="wa-grid wa-gap-3xl">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<span>Revenue</span>
|
||||
<span>+4.75%</span>
|
||||
</div>
|
||||
<div class="wa-heading-2xl">$400,000</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Cards with Avatars
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 30ch">
|
||||
<wa-card>
|
||||
|
||||
@@ -125,3 +125,83 @@ description: 'Guide users with helpful prompts and visuals when no content is av
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
## Add people
|
||||
```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">
|
||||
<wa-input></wa-input><wa-button>Invite</wa-button>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<span>Team members previously added to projects</span>
|
||||
<wa-divider></wa-divider>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section><section>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>lindsey Walton</span>
|
||||
<span>Front end Developer</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus" slot="prefix"></wa-icon>
|
||||
Invite
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -73,3 +73,46 @@ description: 'Empower users to learn more with a structured list of questions an
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 3 Column
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
|
||||
|
||||
<dl class="wa-grid wa-gap-m" style="--min-column-size: 30ch;">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How often do you update your courses?</dt>
|
||||
<dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
|
||||
</div>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you offer certificates of completion?</dt>
|
||||
<dd>You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.</dd>
|
||||
</div>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you offer a free trial?</dt>
|
||||
<dd>
|
||||
<p>We offer a free trial to first-time subscribers. You can find more about the trial here.</p>
|
||||
<p>We also have the following opportunities to learn for free:</p>
|
||||
<ul>
|
||||
<li>The online bootcamp is a free, two-week curriculum to get you started with web development.</li>
|
||||
<li>You can create a free account to gain access to five full courses for free.</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">Do you have discounts for students?</dt>
|
||||
<dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
|
||||
</div>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do I cancel my plan?</dt>
|
||||
<dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
287
docs/docs/patterns/app/feed.md
Normal file
287
docs/docs/patterns/app/feed.md
Normal file
@@ -0,0 +1,287 @@
|
||||
---
|
||||
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,6 +130,171 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</div>
|
||||
```
|
||||
|
||||
## Cards with Footer Actions
|
||||
|
||||
```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-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>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="at"></wa-icon>
|
||||
Email
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="phone"></wa-icon>
|
||||
Phone
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<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>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="at"></wa-icon>
|
||||
Email
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="phone"></wa-icon>
|
||||
Phone
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<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>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="at"></wa-icon>
|
||||
Email
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="phone"></wa-icon>
|
||||
Phone
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<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>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="at"></wa-icon>
|
||||
Email
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="phone"></wa-icon>
|
||||
Phone
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
## with Images
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</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>
|
||||
<div class="wa-stack">
|
||||
<span>Lindsay Walton</span>
|
||||
<span>Developer</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>
|
||||
</article>
|
||||
</div>
|
||||
```
|
||||
## Linked Cards with Options Menu
|
||||
|
||||
```html{.example}
|
||||
@@ -224,4 +389,137 @@ description: 'Improve browsing and selection by organizing data in a structured
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
## Kanban
|
||||
```html {.example}
|
||||
<div>
|
||||
<h2>Project #487</h2>
|
||||
<div class="wa-grid wa-gap-2xl">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-s"><span>Draft</span> <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
|
||||
|
||||
|
||||
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<span class="wa-heading-s">Unit Testing</span>
|
||||
<wa-dropdown>
|
||||
<wa-icon-button id="task-action-4" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Copy link</wa-menu-item>
|
||||
<wa-menu-item>Rename</wa-menu-item>
|
||||
<wa-menu-item>Move to trash</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<wa-tooltip for="task-action-4">More actions</wa-tooltip>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-s"><span>In Progress</span> <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
|
||||
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<span class="wa-heading-s">UX Audit</span>
|
||||
<wa-dropdown>
|
||||
<wa-icon-button id="task-action-2" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Copy link</wa-menu-item>
|
||||
<wa-menu-item>Rename</wa-menu-item>
|
||||
<wa-menu-item>Move to trash</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<wa-tooltip for="task-action-2">More actions</wa-tooltip>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<span class="wa-heading-s">Visual Testing</span>
|
||||
<wa-dropdown>
|
||||
<wa-icon-button id="task-action-3" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Copy link</wa-menu-item>
|
||||
<wa-menu-item>Rename</wa-menu-item>
|
||||
<wa-menu-item>Move to trash</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<wa-tooltip for="task-action-3">More actions</wa-tooltip>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<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>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-s"><span>Ready for Review</span> <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
|
||||
<wa-card>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<span class="wa-heading-s">Deploy Bug Fixes</span>
|
||||
<wa-dropdown>
|
||||
<wa-icon-button id="task-action-1" slot="trigger" name="ellipsis" label="More actions"></wa-icon-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Copy link</wa-menu-item>
|
||||
<wa-menu-item>Rename</wa-menu-item>
|
||||
<wa-menu-item>Move to trash</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<wa-tooltip for="task-action-1">More actions</wa-tooltip>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge appearance="outlined" pill>Development</wa-badge> <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
<wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
Add Task
|
||||
</wa-button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
---
|
||||
title: Permissions
|
||||
description: ''
|
||||
parent: app
|
||||
tags: app
|
||||
description: 'Permission patterns provide or restrict access to users.'
|
||||
---
|
||||
|
||||
## with form inputs
|
||||
## With Form Inputs
|
||||
```html{.example}
|
||||
<wa-card with-header style="max-width: 60ch; margin: 0 auto;">
|
||||
<wa-card with-header style="max-width: 72ch; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<h2 class="wa-heading-m">Invite Team Member</h2>
|
||||
<h2 class="wa-heading-m">Invite Team Members</h2>
|
||||
<wa-icon name="close"></wa-icon>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xl">
|
||||
@@ -93,4 +91,138 @@ tags: app
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Link Settings
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 45ch; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">Manage Link</h2>
|
||||
<wa-input label="Expiration Date" type="date"></wa-input>
|
||||
<wa-radio-group
|
||||
label="Share Limit"
|
||||
orientation="horizontal"
|
||||
name="share-limit"
|
||||
value="0"
|
||||
>
|
||||
<wa-radio-button value="0">None</wa-radio-button>
|
||||
<wa-radio-button value="5">5</wa-radio-button>
|
||||
<wa-radio-button value="10">10</wa-radio-button>
|
||||
<wa-radio-button value="50">50</wa-radio-button>
|
||||
<wa-radio-button value="100">100</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-switch hint="Members are removed after logging out." checked>Temporary Access</wa-switch>
|
||||
<div class="wa-cluster wa-gap-xs" style="justify-content: flex-end">
|
||||
<wa-button size="small" appearance="outlined" pill>Cancel</wa-button>
|
||||
<wa-button size="small" variant="brand" pill>Generate</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
## Role Settings
|
||||
```html {.example}
|
||||
<div style="max-width: 78ch; margin: 0 auto;">
|
||||
<h2>Settings</h2>
|
||||
<p>Update settings for this server.</p>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="general">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="user"></wa-icon>
|
||||
<span>User Permissions</span>
|
||||
</div>
|
||||
</wa-tab>
|
||||
<wa-tab-panel name="general">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1741289308283-feba56f857cc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGJlYXJkfGVufDB8MnwwfHx8Mg%3D%3D" alt="image avatar"></wa-avatar>
|
||||
<div class="wa-split">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span class="wa-heading-s">Kris Kringle</span>
|
||||
<span class="wa-caption-m">Admin</span>
|
||||
</div>
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon slot="prefix" name="edit"></wa-icon>
|
||||
Edit Profile
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1579824894326-77ec5aaf8703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHJlaW5kZWVyfGVufDB8MnwwfHx8Mg%3D%3D"></wa-avatar>
|
||||
<span class="wa-caption-m">Dasher</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select value="moderator">
|
||||
<wa-option value="moderator">Moderator</wa-option>
|
||||
<wa-option value="contributor">Contributor</wa-option>
|
||||
<wa-option value="reader">Reader</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1691065686144-916ff29d1b4f?q=80&w=2666&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<span class="wa-caption-m">Dancer</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<wa-select value="moderator">
|
||||
<wa-option value="moderator">Moderator</wa-option>
|
||||
<wa-option value="contributor">Contributor</wa-option>
|
||||
<wa-option value="reader">Reader</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1616742618872-9e8a890d90b2?q=80&w=2712&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<span class="wa-caption-m">Prancer</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select value="contributor">
|
||||
<wa-option value="moderator">Moderator</wa-option>
|
||||
<wa-option value="contributor">Contributor</wa-option>
|
||||
<wa-option value="reader">Reader</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1728290403857-1b7909db2baa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
|
||||
<span class="wa-caption-m">Vixen</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select value="reader">
|
||||
<wa-option value="moderator">Moderator</wa-option>
|
||||
<wa-option value="contributor">Contributor</wa-option>
|
||||
<wa-option value="reader">Reader</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</wa-tab-panel>
|
||||
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
```
|
||||
@@ -186,3 +186,59 @@ description: 'Empower your customers to view past purchases and track upcoming o
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
## Card separated
|
||||
```html{.example}
|
||||
<div class="wa-stack" style="max-width: 60ch; margin: 0 auto;">
|
||||
<wa-card>
|
||||
<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>
|
||||
</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>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<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>
|
||||
</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>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<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>
|
||||
</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>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
@@ -5,28 +5,43 @@ parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 60ch; margin: 0 auto;">
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span class="wa-heading-l">DAILY DEALS AT</span>
|
||||
<span class="wa-heading-3xl">50% OFF</span>
|
||||
</div>
|
||||
<span>For a limited time only!</span>
|
||||
<wa-button pill>Reveal Today's Deals</wa-button>
|
||||
## 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>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<wa-card class="wa-border-radius-square" style="max-width: 84ch; margin: 0 auto;">
|
||||
<div class="wa-grid wa-align-items-center wa-gap-3xl">
|
||||
<div class="wa-frame wa-border-radius-circle"><img src="https://images.unsplash.com/photo-1680602240329-b1416f7aa18b?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
|
||||
<div class="wa-stack">
|
||||
<h2>Know the score with your customers</h2>
|
||||
<p>Keep a competative edge by truly understanding the voice of your customers. <a href="#">Customer satisfaction surveys</a> help you connect at multiple touchpoints to find out exactly what your customers want, need, and expect<p>
|
||||
<wa-button variant="success">Create Survey</wa-button>
|
||||
</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>
|
||||
</wa-card>
|
||||
</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>
|
||||
```
|
||||
@@ -4,21 +4,59 @@ description: 'Empower your customers to view past purchases and track upcoming o
|
||||
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>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.</p></div>
|
||||
<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">
|
||||
<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">
|
||||
<section class="wa-stack wa-gap-xs">
|
||||
<h2 class="wa-heading-s">Others</h2>
|
||||
<a href="#">Corporate</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
|
||||
@@ -5,33 +5,78 @@ parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Newsletter signup
|
||||
## Simple
|
||||
```html{.example}
|
||||
<wa-card style="margin: 0 auto; max-width: 45ch;">
|
||||
<div class="wa-stack wa-gap-l">
|
||||
<h2 class="wa-heading-l">Subscribe to our Newsletter</h2>
|
||||
<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>
|
||||
<div class="wa-flank:end wa-gap-2xs">
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button>Subscribe</wa-button>
|
||||
</div>
|
||||
</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-1618918709870-ce3c423426f7?q=80&w=2668&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="mailbox" />
|
||||
<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-xl">Subscribe!</h2>
|
||||
<p class="wa-caption-xl" style="text-align: center; word-break: break-word">Get the best new products in your inbox, everyday. Get the latest content first.</p>
|
||||
<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>
|
||||
<div class="wa-flank:end wa-gap-2xs">
|
||||
<form class="wa-flank:end wa-gap-2xs">
|
||||
<wa-input placeholder="email@example.com"></wa-input>
|
||||
<wa-button appearance="outlined">Signup</wa-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</wa-card>
|
||||
|
||||
@@ -5,6 +5,23 @@ 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}
|
||||
@@ -19,24 +36,23 @@ tags: information
|
||||
<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: 75ch;margin: 10% auto 0;">
|
||||
<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-stack wa-gap-2xs">
|
||||
<div class="wa-grid">
|
||||
<article class="wa-stack wa-gap-s">
|
||||
<span class="wa-heading-s">Subscribe without ads</span>
|
||||
<div class="wa-flank wa-gap-xs">
|
||||
<wa-icon name="credit-card"></wa-icon>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-s">Use for free with ads</span>
|
||||
<div class="wa-flank wa-gap-xs">
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<p>Discover products and brands through personalized ads, while using your accounts for free. Your info will be used for ads</p>
|
||||
</div>
|
||||
<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>
|
||||
@@ -57,25 +73,23 @@ tags: information
|
||||
<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: 100%;position: fixed; bottom: 0; right: 0;">
|
||||
<wa-card class="wa-border-radius-square" style="width: 75%;position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
|
||||
<div>
|
||||
<h2 class="wa-heading-l">Explore more offers.</h2>
|
||||
<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-icon style="font-size: var(--wa-font-size-2xl);" name="mobile-screen-button"></wa-icon>
|
||||
<span class="wa-heading-m">Standard Digital</span>
|
||||
<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. Pay a year upfront and save 20%</p>
|
||||
<wa-button variant="brand">Select</wa-button>
|
||||
<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-icon style="font-size: var(--wa-font-size-2xl);" name="mobile-screen-button"></wa-icon>
|
||||
<span class="wa-heading-m">Premium Digital</span>
|
||||
<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 qualify journalism with expert analysis from industry leaders. Pay a year upfront and save 20%</p>
|
||||
<wa-button variant="brand">Select</wa-button>
|
||||
<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>
|
||||
|
||||
@@ -5,80 +5,194 @@ parent: information
|
||||
tags: information
|
||||
---
|
||||
|
||||
## Grid
|
||||
```html{.example}
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<a href="#">
|
||||
## 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-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<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">The fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
<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="#">
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<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">The fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
<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="#">
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<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">The fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
<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="#">
|
||||
<a href="#" style="text-decoration: none;">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<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 fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="#">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">The fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="#">
|
||||
<wa-card with-image>
|
||||
<img slot="image" src="https://images.unsplash.com/photo-1575237843875-43d5e6ee0911?q=80&w=2674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-m">The fight to save the Post office</h2>
|
||||
<p class="wa-caption-l">In the Grand Canyon, the U.S. Postal Service still delivers mail by mule</p>
|
||||
<div>
|
||||
<span class="wa-heading-s">Adam Smith</span> • <span>March 12th 2023</span>
|
||||
<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>
|
||||
```
|
||||
@@ -66,4 +66,36 @@ tags: information
|
||||
</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