Add Info subtle

bring · Mar 11, 2021 · a66f1a2 · a66f1a2
1 parent 4052a3f
commit a66f1a2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/src/shared/components/info-subtle/Info-subtle.md 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
@@ -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);
+        }
+    }
+}