Skip to content

Commit

Permalink
feat(cards): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 12, 2022
1 parent 50ecc77 commit 84a8f20
Show file tree
Hide file tree
Showing 9 changed files with 283 additions and 92 deletions.
107 changes: 77 additions & 30 deletions kitchen-sink/react/pages/Cards.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
List,
ListItem,
Link,
Button,
} from 'konsta/react';

export default function CardsPage() {
Expand Down Expand Up @@ -51,6 +52,35 @@ export default function CardsPage() {
Mauris aliquet magna justo.{' '}
</Card>

<BlockTitle withBlock={false}>Outline With Dividers</BlockTitle>
<Card
outline
header="Card header"
footer="Card footer"
headerDivider
footerDivider
>
Card with header and footer. Card headers are used to display card
titles and footers for additional information or just for custom
actions.
</Card>

<BlockTitle withBlock={false}>Raised Cards</BlockTitle>
<Card raised>
This is a simple card with plain text, but cards can also contain their
own header, footer, list view, image, or any other element.
</Card>
<Card raised header="Card header" footer="Card footer">
Card with header and footer. Card headers are used to display card
titles and footers for additional information or just for custom
actions.
</Card>
<Card raised>
Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
Mauris aliquet magna justo.{' '}
</Card>

<BlockTitle withBlock={false}>Card With List View</BlockTitle>
<Card>
<List nested className="-m-4">
Expand All @@ -65,49 +95,66 @@ export default function CardsPage() {
<BlockTitle withBlock={false}>Styled Cards</BlockTitle>
<div className="lg:grid lg:grid-cols-2">
<Card
header={
<div
className="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
}}
>
Journey To Mountains
</div>
}
outline
footer={
<div className="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<>
<div className="flex justify-between material:hidden">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<div className="flex justify-start ios:hidden space-x-2">
<Button rounded inline>
Like
</Button>
<Button rounded inline outline>
Read more
</Button>
</div>
</>
}
>
<div
className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
}}
>
Journey To Mountains
</div>
<div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
</Card>
<Card
header={
<div
className="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
}}
>
Lorem Ipsum
</div>
}
footer={
<div className="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<>
<div className="flex justify-between material:hidden">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<div className="flex justify-start ios:hidden space-x-2">
<Button rounded inline>
Like
</Button>
<Button rounded inline outline>
Read more
</Button>
</div>
</>
}
>
<div
className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/people-1000x600-3.jpg)',
}}
>
Journey To Mountains
</div>
<div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
Expand Down
63 changes: 51 additions & 12 deletions kitchen-sink/svelte/pages/Cards.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
List,
ListItem,
Link,
Button,
} from 'konsta/svelte';
const isPreview = document.location.href.includes('examplePreview');
Expand Down Expand Up @@ -52,6 +53,33 @@
aliquet magna justo.{' '}
</Card>

<BlockTitle withBlock={false}>Outline With Dividers</BlockTitle>
<Card
outline
header="Card header"
footer="Card footer"
headerDivider
footerDivider
>
Card with header and footer. Card headers are used to display card titles
and footers for additional information or just for custom actions.
</Card>

<BlockTitle withBlock={false}>Raised Cards</BlockTitle>
<Card raised>
This is a simple card with plain text, but cards can also contain their own
header, footer, list view, image, or any other element.
</Card>
<Card raised header="Card header" footer="Card footer">
Card with header and footer. Card headers are used to display card titles
and footers for additional information or just for custom actions.
</Card>
<Card raised>
Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
aliquet magna justo.{' '}
</Card>

<BlockTitle withBlock={false}>Card With List View</BlockTitle>
<Card>
<List nested class="-m-4">
Expand All @@ -65,10 +93,9 @@

<BlockTitle withBlock={false}>Styled Cards</BlockTitle>
<div class="lg:grid lg:grid-cols-2">
<Card>
<Card outline>
<div
slot="header"
class="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
>
Journey To Mountains
Expand All @@ -78,15 +105,21 @@
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
<div slot="footer" class="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<svelte:fragment slot="footer">
<div class="flex justify-between material:hidden">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<div class="flex justify-start ios:hidden space-x-2">
<Button rounded inline>Like</Button>
<Button rounded inline outline>Read more</Button>
</div>
</svelte:fragment>
</Card>
<Card>
<div
slot="header"
class="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
>
Lorem Ipsum
Expand All @@ -96,10 +129,16 @@
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
<div slot="footer" class="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<svelte:fragment slot="footer">
<div class="flex justify-between material:hidden">
<Link>Like</Link>
<Link>Read more</Link>
</div>
<div class="flex justify-start ios:hidden space-x-2">
<Button rounded inline>Like</Button>
<Button rounded inline outline>Read more</Button>
</div>
</svelte:fragment>
</Card>
</div>
</Page>
83 changes: 58 additions & 25 deletions kitchen-sink/vue/pages/Cards.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,33 @@
Mauris aliquet magna justo.{' '}
</k-card>

<k-block-title :with-block="false">Outline With Dividers</k-block-title>
<k-card
outline
header="Card header"
footer="Card footer"
header-divider
footer-divider
>
Card with header and footer. Card headers are used to display card titles
and footers for additional information or just for custom actions.
</k-card>

<k-block-title :with-block="false">Raised Cards</k-block-title>
<k-card raised>
This is a simple card with plain text, but cards can also contain their
own header, footer, list view, image, or any other element.
</k-card>
<k-card raised header="Card header" footer="Card footer">
Card with header and footer. Card headers are used to display card titles
and footers for additional information or just for custom actions.
</k-card>
<k-card raised>
Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
Mauris aliquet magna justo.{' '}
</k-card>

<k-block-title :with-block="false">Card With List View</k-block-title>
<k-card>
<k-list nested class="-m-4">
Expand All @@ -49,48 +76,52 @@

<k-block-title :with-block="false">Styled Cards</k-block-title>
<div class="lg:grid lg:grid-cols-2">
<k-card>
<template #header>
<div
class="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
:style="{
'background-image':
'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
}"
>
Journey To Mountains
</div>
</template>
<k-card outline>
<template #footer>
<div class="flex justify-between">
<div class="flex justify-between material:hidden">
<k-link>Like</k-link>
<k-link>Read more</k-link>
</div>
<div className="flex justify-start ios:hidden space-x-2">
<k-button rounded inline> Like </k-button>
<k-button rounded inline outline> Read more </k-button>
</div>
</template>
<div
class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
:style="{
'background-image':
'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
}"
>
Journey To Mountains
</div>
<div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
</k-card>
<k-card>
<template #header>
<div
class="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
:style="{
'background-image':
'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
}"
>
Lorem Ipsum
</div>
</template>
<template #footer>
<div class="flex justify-between">
<div class="flex justify-between material:hidden">
<k-link>Like</k-link>
<k-link>Read more</k-link>
</div>
<div className="flex justify-start ios:hidden space-x-2">
<k-button rounded inline> Like </k-button>
<k-button rounded inline outline> Read more </k-button>
</div>
</template>
<div
class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
:style="{
'background-image':
'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
}"
>
Lorem Ipsum
</div>
<div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
Expand All @@ -110,6 +141,7 @@
kList,
kListItem,
kLink,
kButton,
} from 'konsta/vue';
export default {
Expand All @@ -123,6 +155,7 @@
kList,
kListItem,
kLink,
kButton,
},
setup() {
return {
Expand Down
Loading

0 comments on commit 84a8f20

Please sign in to comment.