Docs reference

Callouts

Default callout

Warning callout

Danger callout

Details

Click to expand inline content

This is inline details content. It supports markdown formatting and will be hidden until clicked.

Code example

SCSS

.test {
  --color: blue;
}

The HTML abbreviation element.

This is a test.

HTML

<div class="test">This is a test.</div>

scss/_variables.scss

$gradient: linear-gradient(180deg, color-mix(var(--white) 15%, transparent), color-mix(var(--white) 0%, transparent));

site/src/assets/partials/snippets.js

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}