The Kitchen Sink

As we bring over components from the old site, we're using this page as a UI playground to make sure everything looks as expected.

---

Styles

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

---

Styles

Headings with inline code

Heading level 1 inline code

Heading level 2 inline code

Heading level 3 inline code

Heading level 4 inline code

Heading level 5 inline code

Heading level 6 inline code

---

Styles

Paragraph text and inline formatting

Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

The highlighted words are a link: This is a link

This is bold with two asterisks: bold.

This is bold with two underscores: bold.

This is italic with one asterisk: bold.

This is italic with one asterisk: italic.

This is italic with one underscore: italic.

This is strikethrough with two tildes: strikethrough.

This is inline code with backticks: inline code.

---

Styles

Blockquote

This is a blockquote.

---

Styles

Lists

Unordered List

• Item 1
• Item 2
• Item 3

Ordered List

1. Item 1
2. Item 2
3. Item 3

---

Styles

Code blocks & steps

This is an example of a code block with a title and specified language and some lines highlighted:

/src/components/HelloCodeTitle.js

const foo = 'bar';
const baz = 'qux';
const quux = 'quuz';

---

Styles

Tab Selectors

Console

Some console stuff.

CLI

Some CLI stuff.

API

Some API stuff.

---

Styles

Admonitions

note

Some content with Markdown syntax. Check this api.

Run the following:

ddn model update Users

tip

Some content with Markdown syntax. Check this api.

Run the following:

const foo = 'bar';

info

Some content with Markdown syntax. Check this api.

Here is an extremely long title, the purpose of which is to test the wrapping of the title in the code block. Let us all hope that it works and looks nice

const foo: string = 'bar';

caution

Some content with Markdown syntax. Check this api.

danger

Some content with Markdown syntax. Check this api.

Run the following:

ddn model update Users

Nested Admonitions

Parent

Parent content

Child

Child content

Deep Child

Deep child content

---

Styles

Links

This is a link

This is a link with title

---

Styles

Tables

Column 1	Column 2
Cell 1	Cell 2

---

Styles

Image and video containers

The 50/50

Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

Img or video container

---

The full-width

Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Img or video container

---

Styles

Footnotes

Here's a sentence with a footnote.¹

---

Styles

Collapsible Section (Details / Summary)

Click to expand!

This is a hidden section.

---

Styles

GraphiQL IDE

NB: Do note that a name for the query is required, otherwise it will break upon rendering whenever a user attempts to "prettify" the query.

Footnotes

1. This is the footnote. ↩