From a3fb9a5b75305e19305b0bfa10edff8a7d69145b Mon Sep 17 00:00:00 2001
From: Stephan Max <stephan.max@gmail.com>
Date: Sat, 7 Jul 2018 23:59:32 +0200
Subject: [PATCH] Add example for <a>

---
 .../html-examples/inline-text-semantics/a.html    | 15 +++++++++++++++
 .../html-examples/inline-text-semantics/css/a.css |  9 +++++++++
 .../html-examples/inline-text-semantics/meta.json | 11 +++++++++++
 media/examples/external-link-alt-solid.svg        |  3 +++
 4 files changed, 38 insertions(+)
 create mode 100644 live-examples/html-examples/inline-text-semantics/a.html
 create mode 100644 live-examples/html-examples/inline-text-semantics/css/a.css
 create mode 100644 media/examples/external-link-alt-solid.svg

diff --git a/live-examples/html-examples/inline-text-semantics/a.html b/live-examples/html-examples/inline-text-semantics/a.html
new file mode 100644
index 000000000..cdc235cc1
--- /dev/null
+++ b/live-examples/html-examples/inline-text-semantics/a.html
@@ -0,0 +1,15 @@
+<h1 id="imprint">About this Website</h1>
+
+<p>This website was made and is maintained by Michael Bluth.</p>
+
+<p>You can reach Michael via:</p>
+
+<ul>
+  <li><a href="https://example.com">Website</a></li>
+  <li><a href="mailto:michael.bluth@example.com">Email</a></li>
+  <li><a href="tel:+123456789">Phone</a></li>
+</ul>
+
+<hr />
+
+<p><a href="#imprint">Back to top</a></p>
diff --git a/live-examples/html-examples/inline-text-semantics/css/a.css b/live-examples/html-examples/inline-text-semantics/css/a.css
new file mode 100644
index 000000000..af2943da9
--- /dev/null
+++ b/live-examples/html-examples/inline-text-semantics/css/a.css
@@ -0,0 +1,9 @@
+a[href^="http"]::before {
+  background: url(/media/examples/external-link-alt-solid.svg) no-repeat;
+  content: '';
+  display: inline-block;
+  margin-right: 3px;
+  opacity: .6;
+  width: .9em;
+  height: .8em;
+}
diff --git a/live-examples/html-examples/inline-text-semantics/meta.json b/live-examples/html-examples/inline-text-semantics/meta.json
index 9d4b1e434..c50028d9b 100644
--- a/live-examples/html-examples/inline-text-semantics/meta.json
+++ b/live-examples/html-examples/inline-text-semantics/meta.json
@@ -1,5 +1,16 @@
 {
     "pages": {
+        "a": {
+            "baseTmpl": "tmpl/live-tabbed-tmpl.html",
+            "exampleCode":
+                "live-examples/html-examples/inline-text-semantics/a.html",
+            "cssExampleSrc":
+                "live-examples/html-examples/inline-text-semantics/css/a.css",
+            "fileName": "a.html",
+            "title": "HTML Demo: <a>",
+            "type": "tabbed",
+            "height": "tabbed-shorter"
+        },
         "abbr": {
             "baseTmpl": "tmpl/live-tabbed-tmpl.html",
             "exampleCode":
diff --git a/media/examples/external-link-alt-solid.svg b/media/examples/external-link-alt-solid.svg
new file mode 100644
index 000000000..29216f4ab
--- /dev/null
+++ b/media/examples/external-link-alt-solid.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+  <path fill="currentColor" d="M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z"></path>
+</svg>