# Your Page Header

1. First list
2. Second list
3. Third list 

- First list
- Second list
- Third list 

I love using [Docuo](https://www.spreading.ai/) to generate online docs.

> I love using Docuo to generate online docs.

---

| Title | Description  |
| ----- | ------------ |
| Item1 | Destription1 |
| Item2 | Destription2 |

<Check title="Check">This adds a check list to confirm</Check>

<Tip title="Tip">This suggests a helpful tip</Tip>

<Note title="Note">This adds a note in the content</Note>

<Warning title="Warning">This raises a warning to watch out for</Warning>

<Error title="ERROR">This raises a error to watch out for</Error>

<Card title="Card title" icon="./lightbulb-solid.svg" href="/overview/introduction">
  This is a Card example with `href` prop. Clicking will navigate to the `href` refers to.
</Card>

<CardGroup cols={2}>
  <Card title="First Card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
  <Card title="Second Card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
  <Card title="Third Card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
  <Card title="Fourth Card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
</CardGroup>

<Tabs>
  <Tab title="First Tab">
    ☝️ Welcome to the content that you can only see inside the first Tab.
  </Tab>
  <Tab title="Second Tab">
    ✌️ Here's the content that's only inside the second Tab.
  </Tab>
  <Tab title="Third Tab">
    💪 Here's the content that's only inside the third Tab.
  </Tab>
</Tabs>

<Accordion title="I am an Accordion." defaultOpen="true">
  You can put any content in here.
</Accordion>

<Button href="https://docuo.spreading.io/editing-docs/components" primary-color="Green" target="_blank">Click me</Button>

<Button href="./Components.mdx" primary-color="Green" target="_blank">Click me</Button>

<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

Add a `inline code block` in a sentence.

```
helloWorld();
```

helloWorld();

```jsx {1,4-6,11}
import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

```javascript helloWorld.js
console.log("Hello World");
```

console.log("Hello World");

```jsx helloWorld.js {1,4-6,11} hideLineNumbers
import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

<CodeGroup>
```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```
</CodeGroup>

console.log("Hello World");

print('Hello World!')

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

<Frame width="300" height="auto" caption="image description text">
  <img src="/path/image.jpg" />
</Frame>

<Video src="https://youtube.com/xxxxxx"/>