<div class="Callout Callout--must u-text-r-xs" role="note">
<h2 class="Callout-title u-text-r-l">must</h2>
<p class="u-layout-prose u-color-grey-90 u-text-p u-padding-r-all">Rerum nemo ipsa voluptate. Sed ut et repellendus et et et ut similique. Et dolorem corrupti dolore quis qui voluptatem.</p>
</div>
-
Content:
/** @define Callout; weak; */ :root { --Callout-color-must: #f4e6f5; --Callout-color-should: #d1e7ff; --Callout-color-could: #ebf5ef; --Callout-color-example: #e6e5e3; --Callout-border-top-color: #aaa; --Callout-space-unit: 0.5em; } .Callout { border-top: 1px solid var(--Callout-border-top-color); padding: 1em; } .Callout-title { background: transparent; display: block; font-weight: bold; margin-bottom: 1em; width: 100%; } .Callout--must { background: var(--Callout-color-must); border-top-color: color(var(--Callout-color-must) l(-70%)); } .Callout--must > .Callout-title { color: color(var(--Callout-color-must) l(-70%)); } .Callout--should { background: var(--Callout-color-should); border-top-color: color(var(--Callout-color-should) l(-70%)); } .Callout--should > .Callout-title { color: color(var(--Callout-color-should) l(-70%)); } .Callout--could { background: var(--Callout-color-could); border-top-color: color(var(--Callout-color-could) l(-70%)); } .Callout--could > .Callout-title { color: color(var(--Callout-color-could) l(-70%)); } .Callout--example { background: var(--Callout-color-example); border-top-color: color(var(--Callout-color-example) l(-70%)); } .Callout--example > .Callout-title { color: color(var(--Callout-color-example) l(-70%)); }
- URL: /components/raw/callout/index.css
- Filesystem Path: src\components\callout\index.css
- Size: 1.4 KB
There are no notes for this item.