Component: Callout

docs/pages/components/callout.md

@@ -0,0 +1,81 @@
+---
+title: 'Components: Callout - Sloth.css'
+description: Callout component of Sloth.css.
+---
+
+## Callout
+
+A callout is a static message component, that is embedded and always visible within its context.
+
+### Basic callout
+
+Use the `.callout` class to create a box that emphasizes its content.
+
+<div class="demo">
+  <div class="max-w-screen-sm">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p class="callout">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+  </div>
+</div>
+
+```html
+<p class="callout">...</p>
+```
+
+### Colored callout
+
+Use the `.accent`, `.positive` or `.negative` classes to give the callout more meaning.
+
+<div class="demo">
+  <div class="max-w-screen-sm">
+    <p class="callout accent">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p class="callout positive">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p class="callout negative">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+  </div>
+</div>
+
+```html
+<p class="callout accent">...</p>
+<p class="callout positive">...</p>
+<p class="callout negative">...</p>
+```
+
+### Callouts with symbols
+
+Use the `data-symbol` attribute to provide a symbol for a callout.
+
+<div class="demo">
+  <div class="max-w-screen-sm">
+    <p class="callout" data-symbol="i">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p class="callout accent" data-symbol="!">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p class="callout negative" data-symbol="!!">
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+  </div>
+</div>
+
+```html
+<p class="callout" data-symbol="i">...</p>
+<p class="callout accent" data-symbol="!">...</p>
+<p class="callout negative" data-symbol="!!">...</p>
+```

eleventy.config.js

@@ -28,6 +28,7 @@ module.exports = function(eleventyConfig) {
     ],
     components: [
       'badge',
+      'callout',
       'separator',
     ],
   });

src/_components.css

@@ -2,7 +2,7 @@
 @import 'components/_badge.css';
 /* @import 'components/_breadcrumb.css'; */
 /* @import 'components/_button.css'; */
-/* @import 'components/_callout.css'; */
+@import 'components/_callout.css';
 /* @import 'components/_card.css'; */
 /* @import 'components/_input.css'; */
 /* @import 'components/_loader.css'; */

src/components/_callout.css

@@ -0,0 +1,51 @@
+.callout {
+  display: block;
+  position: relative;
+  padding: 1.5rem 2rem;
+  background-color: var(--color-background-muted);
+  border-left: .25rem solid var(--color-text-muted);
+  border-radius: .25rem;
+
+  &.accent {
+    color: var(--color-text-dark);
+    border-color: var(--color-accent);
+    background-color: color-mix(in hsl, var(--color-accent) 50%, black);
+    &[data-symbol]::before {
+      background-color: var(--color-accent);
+    }
+  }
+  &.positive {
+    color: var(--color-text-positive);
+    border-color: var(--color-text-positive);
+    background-color: var(--color-background-positive);
+    &[data-symbol]::before {
+      background-color: var(--color-text-positive);
+    }
+  }
+  &.negative {
+    color: var(--color-text-negative);
+    border-color: var(--color-text-negative);
+    background-color: var(--color-background-negative);
+    &[data-symbol]::before {
+      background-color: var(--color-text-negative);
+    }
+  }
+
+  &[data-symbol]::before {
+    content: attr(data-symbol);
+    position: absolute;
+    display: block;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: -.125rem;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--color-text-light);
+    font-weight: 700;
+    background-color: var(--color-text-muted);
+  }
+}