var(--width-1-4)
var(--width-1-4)
var(--width-1-4)
var(--width-1-4)
var(--width-2-4)
var(--width-2-4)
var(--width-3-4)
var(--width-1-4)
var(--width-1-6)
var(--width-1-6)
var(--width-1-6)
var(--width-1-6)
var(--width-1-6)
var(--width-1-6)
var(--width-1-6)
var(--width-2-6)
var(--width-3-6)
var(--width-2-6)
var(--width-4-6)
var(--width-1-6)
var(--width-5-6)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-1-12)
var(--width-2-12)
var(--width-3-12)
var(--width-4-12)
var(--width-2-12)
var(--width-6-12)
var(--width-6-12)
var(--width-5-12)
var(--width-7-12)
var(--width-8-12)
var(--width-4-12)
var(--width-9-12)
var(--width-3-12)
var(--width-10-12)
var(--width-2-12)
var(--width-11-12)
var(--width-1-12)
$spacing-size-1
$spacing-size-2
$spacing-size-3
$spacing-size-4
$spacing-size-5
$spacing-size-6
$spacing-size-8
$spacing-size-10
$spacing-size-12
$spacing-size-16
$spacing-size-20
$spacing-size-24
$spacing-size-32
$spacing-size-40
$spacing-size-48
$spacing-size-56
$spacing-size-64
var(--radius-none)
var(--radius-xxs)
var(--radius-xs)
var(--radius-sm)
var(--radius-md)
var(--radius-lg)
var(--radius-xl)
var(--radius-2xl)
var(--radius-3xl)
var(--radius-4xl)
var(--radius-full)
var(--text-2xs)
: The quick brown fox jumps over the lazy dog
var(--text-xs)
: The quick brown fox jumps over the lazy dog
var(--text-sm)
: The quick brown fox jumps over the lazy dog
var(--text-base)
: The quick brown fox jumps over the lazy dog
var(--text-lg)
: The quick brown fox jumps over the lazy dog
var(--text-xl)
: The quick brown fox jumps over the lazy dog
var(--text-2xl)
: The quick brown fox jumps over the lazy dog
var(--text-3xl)
: The quick brown fox jumps over the lazy dog
var(--text-2xs)
: The quick brown fox jumps over the lazy dog
var(--text-xs)
: The quick brown fox jumps over the lazy dog
var(--text-sm)
: The quick brown fox jumps over the lazy dog
var(--text-base)
: The quick brown fox jumps over the lazy dog
var(--text-lg)
: The quick brown fox jumps over the lazy dog
var(--text-xl)
: The quick brown fox jumps over the lazy dog
var(--text-2xl)
: The quick brown fox jumps over the lazy dog
var(--text-3xl)
: The quick brown fox jumps over the lazy dog
var(--text-2xs)
: The quick brown fox jumps over the lazy dog
var(--text-xs)
: The quick brown fox jumps over the lazy dog
var(--text-sm)
: The quick brown fox jumps over the lazy dog
var(--text-base)
: The quick brown fox jumps over the lazy dog
var(--text-lg)
: The quick brown fox jumps over the lazy dog
var(--text-xl)
: The quick brown fox jumps over the lazy dog
var(--text-2xl)
: The quick brown fox jumps over the lazy dog
var(--text-3xl)
: The quick brown fox jumps over the lazy dog
--color-white
--color-black
--color-gray-25
--color-gray-50
--color-gray-100
--color-gray-200
--color-gray-300
--color-gray-400
--color-gray-500
--color-gray-600
--color-gray-700
--color-gray-800
--color-gray-900
--color-gray-950
--color-brand-25
--color-brand-50
--color-brand-100
--color-brand-200
--color-brand-300
--color-brand-400
--color-brand-500
--color-brand-600
--color-brand-700
--color-brand-800
--color-brand-900
--color-brand-950
--color-warning-25
--color-warning-50
--color-warning-100
--color-warning-200
--color-warning-300
--color-warning-400
--color-warning-500
--color-warning-600
--color-warning-700
--color-warning-800
--color-warning-900
--color-warning-950
--color-bg-primary
--color-bg-secondary
--color-bg-brand-solid
--color-bg-disabled_subtle
--color-fg-primary
--color-fg-secondary
--color-fg-tertiary
--color-fg-quinary
--color-fg-disabled
--color-fg-placeholder
--color-fg-white
--color-border-primary
--color-border-secondary
--color-border-tertiary
--color-border-disabled_subtle
--color-button-primary-bg
--color-button-primary-bg-hover
--color-button-primary-bg-active
--color-button-primary-shadow-focus
--color-button-primary-fg
--color-button-primary-border
--color-button-secondary-bg
--color-button-secondary-bg-hover
--color-button-secondary-bg-active
--color-button-secondary-shadow-focus
--color-button-secondary-fg
--color-button-secondary-border
--color-button-tertiary-bg
--color-button-tertiary-bg-hover
--color-button-tertiary-bg-active
--color-button-tertiary-shadow-focus
--color-button-tertiary-fg
--color-button-tertiary-border
--color-button-disabled-bg
--color-button-disabled-fg
--color-button-disabled-border
--color-input-border
--color-input-border-hover
--color-input-shadow-focus
--color-input-disabled-bg
--color-input-disabled-fg
--color-util-gray-50
--color-util-gray-100
--color-util-gray-200
--color-util-gray-300
--color-util-gray-400
--color-util-gray-500
--color-util-gray-600
--color-util-gray-700
--color-util-brand-50
--color-util-brand-100
--color-util-brand-200
--color-util-brand-300
--color-util-brand-400
--color-util-brand-500
--color-util-brand-600
--color-util-brand-700
--color-util-warning-50
--color-util-warning-100
--color-util-warning-200
--color-util-warning-300
--color-util-warning-400
--color-util-warning-500
--color-util-warning-600
--color-util-warning-700
In hic fugit nostrum Bold exercitationem aut nam quaerat occaecati. Cumque quo explicabo. Mollitia fugiat Italic unde mollitia dolor consequatur incidunt. Quod debitis aliquam Underline ipsum quis sed qui aut.
Quis dicta et incidunt Deleted mollitia quo vel omnis. Voluptas quibusdam vitae voluptates Inserted aspernatur mollitia amet. Id rem magnam at Strikethrough harum a quidem velit maiores. Accusamus autem dolorem Small voluptatem fuga cumqueSub maxime laboreSup ut. Aliquid iure sed id incidunt necessitatibus.
Eum beatae Kbd doloremque est harum veniam veniam ${code}
ducimus. Et dignissimos praesentium placeat link voluptatum eum non. Qui iste dolorum voluptate omnis omnis veniam.
<hr />
<ul>
<ol>
.list-style-none
<pre>
:root { --font-size: 1rem; --line-height: 1.5; --font-weight: 400; --font-weight-thin: 300; --font-weight-normal: 400; --font-weight-bold: 600; --icon-size: 2em; }
<Snippet framework="javascript">
const addOne = (x) => {
// Add one here
const result = x + 1;
return result;
}
I am a note: Earum unde dolores sed similique ut dignissimos voluptatum iure quia. Nam reiciendis doloribus. Blanditiis temporibus ducimus. Vel aspernatur sed quia quis id maxime rerum numquam adipisci. Laudantium vel dolorum non.
I am a warning: Consequatur porro amet sunt omnis optio ipsam ad ut. Nobis porro quo sunt. Natus ut quia et ea autem. Eaque consequatur est harum libero ipsa sit consequatur pariatur sit.
I am an idea: Labore tempore nihil aspernatur et repudiandae et vel. Autem illum deserunt accusantium suscipit laboriosam magni totam corrupti aut. Repellat omnis nihil accusamus eius laboriosam. Consequatur sit velit quas officiis delectus.
<table>
# | Year | Month | Day | Hour | Minute |
---|---|---|---|---|---|
1 | 2023 | January | 24th | 12 | 42 |
2 | 1997 | October | 3rd | 09 | 12 |
2 | 2096 | March | 31st | 18 | 55 |
<table class="small-header no-zebra">
# | Year | Month | Day | Hour | Minute |
---|---|---|---|---|---|
1 | 2023 | January | 24th | 12 | 42 |
2 | 1997 | October | 3rd | 09 | 12 |
2 | 2096 | March | 31st | 18 | 55 |
<table class="stack>
/ table { @incldue stack-table(); }
# | Year | Month | Day | Hour | Minute |
---|---|---|---|---|---|
1 | 2023 | January | 24th | 12 | 42 |
2 | 1997 | October | 3rd | 09 | 12 |
2 | 2096 | March | 31st | 18 | 55 |