deploy: 35c28e7

assets/packages/@rhds/elements/elements/rh-tile/README.md

@@ -0,0 +1,45 @@
+# Tile
+A form of selection that can be used in place of a link, checkbox, or radio button. 
+
+## Usage
+If the tile is not checkable, a link slotted in the image or headline slots will become the link when the card is clicked. Be sure to include alt text for a slotted image especially if it is wrapped in a link.
+
+```html
+  <rh-tile>
+    <img slot="image" src="//fakeimg.pl/296x50" alt="296 X 50 placeholder image">
+    <div slot="title">Title</div>
+    <h2 slot="headline"><a href="#top">Link</a></h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <div slot="footer">Suspendisse eu turpis elementum</div>
+  </rh-tile>
+```
+
+# Tile Group
+A group of `<rh-tile>` elements which handles radio selection.
+## Usage
+A tile group should include more than one tile in its slot.
+
+```html
+  <rh-tile-group radio>
+    <rh-tile checked>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+
+    <rh-tile>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+
+    <rh-tile>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+  </rh-tile-group>
+```

assets/packages/@rhds/elements/elements/rh-tile/demo/checkable.html

@@ -0,0 +1,25 @@
+<link rel="stylesheet" href="demo.css">
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+<script type="module" src="rh-tile.js"></script>
+
+<div id="demo-container">
+  <h2>Checkboxes</h2>
+
+  <rh-tile checkable>
+    <h2 slot="headline">Headline</h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <div slot="footer">Suspendisse eu turpis elementum</div>
+  </rh-tile>
+
+  <rh-tile checkable checked>
+    <h2 slot="headline">Headline</h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <div slot="footer">Suspendisse eu turpis elementum</div>
+  </rh-tile>
+
+  <rh-tile checkable bleed disabled>
+    <h2 slot="headline">Headline</h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <div slot="footer">Suspendisse eu turpis elementum</div>
+  </rh-tile>
+</div>