Kitchen Sink: outline Cards demos

Author: nolimits4web

kitchen-sink/core/pages/cards.html

@@ -26,6 +26,20 @@
     <div class="card">
       <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
     </div>
+
+    <div class="block-title">Outline Cards</div>
+    <div class="card card-outline">
+      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
+    </div>
+    <div class="card card-outline">
+      <div class="card-header">Card header</div>
+      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
+      <div class="card-footer">Card Footer</div>
+    </div>
+    <div class="card card-outline">
+      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
+    </div>
+
     <div class="block-title">Styled Cards</div>
     <div class="card demo-card-header-pic">
       <div style="background-image:url(http://lorempixel.com/1000/600/nature/3/)" valign="bottom" class="card-header">Journey To Mountains</div>
@@ -43,6 +57,7 @@
       </div>
       <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
     </div>
+
     <div class="block-title">Facebook Cards</div>
     <div class="card demo-facebook-card">
       <div class="card-header">
@@ -65,6 +80,7 @@
       </div>
       <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
     </div>
+
     <div class="block-title">Cards With List View</div>
     <div class="card">
       <div class="card-content">

kitchen-sink/react/src/pages/cards.jsx

@@ -21,6 +21,22 @@ export default () => (
       content="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>Outline Cards</BlockTitle>
+    <Card
+      outline
+      content="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
+      outline
+      title="Card header"
+      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
+      footer="Card footer"
+    ></Card>
+    <Card
+      outline
+      content="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>Styled Cards</BlockTitle>
     <Card className="demo-CardHeader-pic">
       <CardHeader

kitchen-sink/vue/src/pages/cards.vue

@@ -18,6 +18,22 @@
       content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
     ></f7-card>
 
+    <f7-block-title>Outline Cards</f7-block-title>
+    <f7-card
+      outline
+      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
+    ></f7-card>
+    <f7-card
+      outline
+      title="Card header"
+      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
+      footer="Card footer"
+    ></f7-card>
+    <f7-card
+      outline
+      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
+    ></f7-card>
+
     <f7-block-title>Styled Cards</f7-block-title>
     <f7-card class="demo-card-header-pic">
       <f7-card-header