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 first.

Markdown In Consultiz

## 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.

<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.

<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.

<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.

<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.

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

ListCheck: a list with check icons.

<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.

<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.

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.