---
layout: codelab
title: Example codelab
authors:
  - adamargyle
description: >-
  This page is used for visual testing of the codelab layout and also
  showcases its capabilities
date: 2023-01-17
hero: image/admin/wKAhovrYm23nFtqFqYbE.png
thumbnail: image/admin/tYvAWgtTaUOxXe9Pxacm.png
glitch: grizzly-planet-bite
glitch_path: index.html
related_post: handbook/content-types/
permalink: "/{{lang}}/handbook/content-types/example-codelab/index.html"
---
The codelab layout supports the full range of markdown elements/blocks as demonstrated in
the [example post](/handbook/content-types/example-post).

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Diam sollicitudin tempor id eu nisl nunc. Interdum velit euismod in pellentesque.
Enim facilisis gravida neque convallis a. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

## Adding a codelab

1. Add a new page using the codelab layout: `layout: codelab`
2. Create a glitch project and add the slug to the frontmatter: `glitch: grizzly-planet-bite`
3. The project will surface as seen on the right.

{% Aside 'caution' %}
[This type of callout](#) suggests proceeding with caution.
{% endAside %}

