feat: add Bootstrap callout shortcode
This commit is contained in:
parent
e72c80197b
commit
9ff40d1e9e
1 changed files with 43 additions and 0 deletions
43
src/components/shortcodes/Callout.astro
Normal file
43
src/components/shortcodes/Callout.astro
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
---
|
||||||
|
const { icon, type = 'info'} = Astro.props;
|
||||||
|
---
|
||||||
|
<div class={`callout callout-${type}`}>
|
||||||
|
{icon && <span class="callout-icon">{icon}</span>}
|
||||||
|
<div class="callout-content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.callout {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem auto;
|
||||||
|
background-color: var(--callout-bg, #f0f0f0);
|
||||||
|
color: var(--callout-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-icon {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-content {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-info {
|
||||||
|
--callout-bg: var(--terminal-green);
|
||||||
|
--callout-text: #2e3440;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-warning {
|
||||||
|
--callout-bg: var(--terminal-yellow);
|
||||||
|
--callout-text: #2e3440;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout-danger {
|
||||||
|
--callout-bg: var(--terminal-red);
|
||||||
|
--callout-text: #111;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Add table
Add a link
Reference in a new issue