kempo-ui 0.3.5 → 0.3.6

package/docs-src/components/card.page.html

@@ -0,0 +1,78 @@
+<page pageName="Card" title="Card - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#labels">Labels</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card>
+          This is a card
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="labels"><a href="#labels" class="no-link">Labels</a></h3>
+    <p>A label gives some text in a box on the top border of the card, helping identify the purpose of the contents.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"I'm a Label"</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="I'm a Label">
+          This is a card
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new Card()</code><br />
+      <code>new Card(<i>string</i> label)</code>
+    </h5>
+
+    <h4>Parameters</h4>
+    <h5><code>label<i>: string</i></code></h5>
+    <p>The label for the card.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>label<i>: string</i></code></h5>
+    <p>The label for the card. Syncs with the <code>label</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>
+    <p>Sets the label for the card.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>