Components

Components

This web come with some components that can be used to help you to write your tutorial.

<Solution>

<solution>

write your solution here

</solution>

<alert>

Props

• type
  • Type: String
  • Default: 'info'
  • Values: ['info', 'success', 'warning', 'danger']

Example

<alert>

Check out an info alert with a `codeblock` and a [link](/themes/docs)!

</alert>

Result

<list>

Props

• items
  • Type: Array
  • Default: []
• type v0.7.0+
  • Type: String
  • Default: 'primary'
  • Values: ['primary', 'info', 'success', 'warning', 'danger']
• icon v0.7.0+
  • Type: String
  • Can be used to override the default type icon, check out the icons available

Example

---
items:
  - Item1
  - Item2
  - Item3
---

<list :items="items"></list>

Result

<badge>

Example

<badge>v1.2+</badge>

Result

<code-group>

This component uses slots, refer to code-block below.

<code-block>

Props

• label
  • Type: String
  • required
• active
  • Type: Boolean
  • Default: false

Example

# Backslashes are for demonstration

<code-group>
  <code-block label="Yarn" active>

  ```bash
  yarn add @nuxt/content-theme-docs
  \```

  </code-block>
  <code-block label="NPM">

  ```bash
  npm install @nuxt/content-theme-docs
  \```

  </code-block>
</code-group>

Result

yarn add @nuxt/content-theme-docs

npm install @nuxt/content-theme-docs

Footnotes [^1]

Example

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

Result

Here is a simple footnote¹. With some additional text after it.