# Writing Content (Markdown, MDX & Shortcodes)

## Writing Content

**Skill level:** Beginner · **Used in:** blog posts, solutions, portfolio projects, industries, roles, profiles, and text pages

The text below the frontmatter of a content file is written in **Markdown**. Files that end in `.mdx` can also use **shortcodes**: small components such as accordions, tabs, and buttons. The `/components/` page of the theme shows every shortcode with its code (source: `src/content/pages/english/components.mdx`).

New to Markdown and frontmatter? Read [Markdown And Frontmatter Basics](/common-guide/beginner/markdown-frontmatter/) first.

### Markdown In Consultiz
```md
## A section heading
### A smaller heading

Plain text. **Bold**, _italic_, and [a link](/contact/).

- A list item
- Another item

![Alt text that describes the image](/images/blog/blog-10.webp)
```

- Start headings at `##`. The page title is already the main heading.
- Links to other sites open in a new tab automatically.
- Add a class after a heading in square brackets to change its size, for example `## Our approach [.h5]` or `## Our approach [.text-4xl]`.
- In a French file, write internal links with the French path: `[contact](/fr/contact/)`.

### Shortcodes
Use these in `.mdx` files. They are available without an import. Leave an empty line after the opening tag and before the closing tag when the inside is Markdown.

**Button**: a theme button, with the same options as [buttons in content files](/consultiz/customization/buttons/).

```mdx
<Button label="Book a consultation" url="/contact/" hoverEffect="bg-flip" class="btn-primary w-fit" />
```

**ArticleFigure**: an image with a caption, as used in the blog posts.

```mdx
<ArticleFigure
  imageSrc="/images/blog-details/blog-dt-img1.webp"
  imageAlt="Two people reviewing a report on a laptop"
  caption="Quarterly reporting review"
/>
```

**Notice**: a highlighted note. `type` is `info`, `warning`, `success`, or `error`; `title` is optional.

```mdx
<Notice type="info" title="Filing deadline">
  Returns for the current tax year are due by the end of January.
</Notice>
```

**Accordion**: a collapsible block. Accordions with the same `group` close each other.

```mdx
<Accordion label="How long does an engagement last?" group="faq" expanded="false">
  Focused projects take a few weeks; transformation programs run for several months.
</Accordion>
```

**Tabs**: tabbed content.

```mdx
<Tabs>
  <Tab name="Overview">The first tab.</Tab>
  <Tab name="Process">The second tab.</Tab>
</Tabs>
```

**ListCheck**: a list with check icons.

```mdx
<ListCheck>

- **Clear reporting**: one view of performance across business units.
- **Lower risk**: compliance reviewed every quarter.

</ListCheck>
```

**VideoInline**: a YouTube video or your own file.

```mdx
<VideoInline src="YOUTUBE_VIDEO_ID" provider="youtube" />
<VideoInline src="/videos/home1-banner-video.mp4" provider="html5" poster="/images/video-thumbnail.webp" />
```

`/components/` also shows `Card` and `CardWrapper` (information cards), `ImageList` and `ImageItem` (image galleries, optionally with a video), and `Testimonial`.

<Aside type="caution" title="MDX is stricter than Markdown">
  In `.mdx` files, `{`, `}`, and `<` have a special meaning. If a build fails
  on a line with one of them in normal text, put the text in backticks or
  write `\{` and `&lt;`. Plain `.md` files don't have this rule, but can't
  use shortcodes.
</Aside>

### HTML In Content
Some demo posts and roles use small blocks of HTML for keyword chips and styled lists. HTML works in both `.md` and `.mdx` files. When you write your own, plain Markdown lists are easier to keep in step between English and French.

### The /components/ Page
`/components/` is a demo of every shortcode and text style. It is left out of `llms.txt` (`excludeFromAi: true`). Keep it while you build, then delete `src/content/pages/english/components.mdx` and `french/components.mdx`, or set `draft: true`, before launch.