@zeix/ui-element/docs/examples/callout-box.html

UIElement - minimal reactive framework based on Web Components

<tab-group>
	<div role="tablist">
		<button type="button" role="tab" id="trigger_callout-box.html" aria-controls="panel_callout-box.html" aria-selected="false" tabindex="-1">HTML</button>
		<button type="button" role="tab" id="trigger_callout-box.css" aria-controls="panel_callout-box.css" aria-selected="false" tabindex="-1">CSS</button>
	</div>
	
<div role="tabpanel" id="panel_callout-box.html" aria-labelledby="trigger_callout-box.html" hidden>
	<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">callout-box.html</span>
			<span class="language">html</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">>This is an informational message.&#x3C;/</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">callout-box</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"tip"</span><span style="color:#F8F8F2">>Remember to hydrate while coding!&#x3C;/</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">callout-box</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"caution"</span><span style="color:#F8F8F2">>Be careful with this operation.&#x3C;/</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">callout-box</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"danger"</span><span style="color:#F8F8F2">>This action is irreversible!&#x3C;/</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">callout-box</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"note"</span><span style="color:#F8F8F2">>This is just a side note.&#x3C;/</span><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2">></span></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>

<div role="tabpanel" id="panel_callout-box.css" aria-labelledby="trigger_callout-box.css" hidden>
	<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">callout-box.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">callout-box</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">relative</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xl);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-l);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--line-height-l);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#a5bbf1</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	border-left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xxs) </span><span style="color:#66D9EF">solid</span><span style="color:#AE81FF"> #4f7cfd</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;::before {</span></span>
<span class="line"><span style="color:#F8F8F2">		position: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">'ℹ️'</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">	></span><span style="color:#F92672"> *</span><span style="color:#A6E22E">:last-child</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">.tip</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#aaca95</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">        border-color</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#5d9934</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;::before {</span></span>
<span class="line"><span style="color:#66D9EF">			content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">'💡'</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">.note</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">        border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-40);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;::before {</span></span>
<span class="line"><span style="color:#66D9EF">			content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">'💬'</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">.caution</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-20);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">        border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-40);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;::before {</span></span>
<span class="line"><span style="color:#66D9EF">			content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">'⚠️'</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">.danger</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#fdab92</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">        border-color</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#e55a32</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;::before {</span></span>
<span class="line"><span style="color:#66D9EF">			content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">'🚨'</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">@media</span><span style="color:#F8F8F2"> (prefers-color-scheme: dark) {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">	callout-box</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#18338f</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">        border-color</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#325df1</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;.tip {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#234905</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            border-color</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#417f11</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;</span><span style="color:#A6E22E">.note</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-80);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-60);</span></span>
<span class="line"><span style="color:#F8F8F2">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;</span><span style="color:#A6E22E">.caution</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-80);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            border-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-gray-60);</span></span>
<span class="line"><span style="color:#F8F8F2">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;</span><span style="color:#A6E22E">.danger</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            background</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#792109</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">            border-color</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">#c83c15</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">        }</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>
</tab-group>