From a66f1a2b0b4c1e09b2abe64771ba23f0ad45032c Mon Sep 17 00:00:00 2001
From: Viggo Normann <v@iggo.no>
Date: Thu, 11 Mar 2021 11:32:19 +0100
Subject: [PATCH] Add Info subtle

---
 .../components/info-subtle/Info-subtle.md     | 34 +++++++++++++++++++
 .../components/info-subtle/info-subtle.css    | 28 +++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/shared/components/info-subtle/Info-subtle.md
 create mode 100644 src/shared/components/info-subtle/info-subtle.css

diff --git a/src/shared/components/info-subtle/Info-subtle.md b/src/shared/components/info-subtle/Info-subtle.md
new file mode 100644
index 000000000..9fdb1ce45
--- /dev/null
+++ b/src/shared/components/info-subtle/Info-subtle.md
@@ -0,0 +1,34 @@
+{navigation}
+
+
+
+### Markup
+```code
+[Base]                  .hw-info-subtle
+
+Elements:
+[Icon]                  .hw-info-subtle__icon
+
+
+```
+
+### Info subtle
+
+```html|plain,light
+<div class="hw-info-subtle">
+    The body text is here. Inline elements only.&nbsp;
+    <a class="hw-link">Click me</a>
+</div>
+```
+
+## Info subtle - with icon
+
+```html|plain,light
+<div class="hw-info-subtle">
+    <i class="fas fa-exclamation-triangle hw-info-subtle__icon"></i>
+    The body text is here. Inline elements only.&nbsp;
+    <a class="hw-link">Click me</a>
+</div>
+```
+
+
diff --git a/src/shared/components/info-subtle/info-subtle.css b/src/shared/components/info-subtle/info-subtle.css
new file mode 100644
index 000000000..196c3f838
--- /dev/null
+++ b/src/shared/components/info-subtle/info-subtle.css
@@ -0,0 +1,28 @@
+/**
+ * Block
+ */
+
+ .hw-info-subtle {
+    border-radius: var(--hw-border-radius);
+    display: flex;
+    align-items: center;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--hw-color-primary-dark);
+    padding: var(--hw-spacing-small-3) var(--hw-spacing-medium-1);
+    @media (--large) {
+        padding: var(--hw-spacing-small-4) var(--hw-spacing-medium-2);
+    }
+
+
+   /**
+    * Elements
+    */
+
+    &__icon {
+        margin-right: var(--hw-spacing-medium-1);
+        @media (--large) {
+            margin-right: var(--hw-spacing-medium-2);
+        }
+    }
+}