feat: deployable design studio and updated component showcase
This commit is contained in:
Clintchiz committed
1 parent
3dddcaac1a
commit
3987ddbcfe
113 files changed
+4544
-1039
No files matched your search
@@ -108,7 +108,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Structured content card usage">
|
||||
@@ -145,7 +145,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Open requests" icon="" titleKey="" subtitle="" subtitleKey="" description="Requests waiting for assignment." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="compact" color="primary" variant="soft" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><strong class="showcase-card-value">38</strong></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard card usage">
|
||||
@@ -184,7 +184,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Featured guide" icon="" titleKey="" subtitle="" subtitleKey="" description="A complete guide to public safety and emergency readiness." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="lg" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><a href="#guide" class="showcase-action">Read guide</a></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Featured resource usage">
|
||||
@@ -222,7 +222,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Design your next chapter" icon="" titleKey="" subtitle="" subtitleKey="" description="A practical guide to building thoughtful products." descriptionKey="" showHeader="true" showFooter="true" header="" footer="6 min read" imageSrc="/showcase-images/green-hero.svg" imageAlt="Green abstract cover" imagePosition="top" actionLabel="Read guide" actionLabelKey="" actionHref="#guide" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image with footer usage">
|
||||
@@ -263,7 +263,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="Your workspace is ready. Invite your teammates to get started." descriptionKey="" showHeader="true" showFooter="true" header="" footer="Updated just now" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without a header usage">
|
||||
@@ -299,7 +299,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="/showcase-images/blue-mountain.svg" imageAlt="Blue geometric landscape" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image-only card usage">
|
||||
@@ -335,7 +335,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><div data-slot="header"><strong>Team invitation</strong></div><Input label="Email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Send invitation" /></div></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom slots usage">
|
||||
|
||||
Reference in new issue
Block a user