--- title: My Lesson Title --- ::: text # Section Heading This is a **text block** with standard Markdown support. - Bullet point one - Bullet point two - Bullet point three You can use *italic*, **bold**, [links](https://example.com), and more. ::: ::: note variant: 2 This is an **important note** for learners to pay attention to. ::: ::: image src: https://example.com/image.jpg alt: Description of the image caption: Optional caption text width: large align: center ::: ::: labeled-graphic src: https://example.com/plant-cell.jpg alt: Diagram of a plant cell caption: Parts of a plant cell width: large align: center ## Nucleus x: 25 y: 40 The **nucleus** is the cell's control center, containing genetic material. ## Mitochondrion x: 75 y: 60 The **mitochondrion** is the powerhouse of the cell, producing energy. ::: ::: video src: https://www.youtube.com/watch?v=dQw4w9WgXcQ caption: Optional video caption ::: ::: audio src: https://example.com/audio.mp3 caption: Optional audio caption ::: ::: document src: https://example.com/safety-manual.pdf filename: Safety Manual.pdf title: Workplace Safety Manual description: Complete guide to workplace safety procedures ::: ::: divider style: line ::: ::: button text: Learn More url: https://example.com style: primary openInNewTab: true align: center ::: ::: iframe src: https://example.com/embed width: 100% height: 400 title: Embedded content allowFullscreen: true ::: ::: accordion allowMultiple: false ## First Section Content for the first accordion section. Supports **Markdown**. ## Second Section Content for the second section. - You can use lists - And other markdown features ## Third Section Content for the third section. ::: ::: tabs orientation: horizontal ## Overview This is the content of the Overview tab. ## Details This tab contains more detailed information. ## Resources Links and resources go here. ::: ::: layout preset: 2-col-equal gap: md ## Column 1 Content for the **left column**. ## Column 2 Content for the **right column**. ::: ::: layout preset: masonry-2 gap: md ## Item 1 Short content. ## Item 2 Longer content so you can see how masonry flows items of different heights through the columns. ## Item 3 Another item. Add as many as you need; masonry distributes them evenly across the configured columns. ## Item 4 Items keep their assigned column when you edit or expand them, so the layout stays stable as you work. ::: ::: knowledge-check type: multiple-choice question: What is the capital of France? correct-feedback: That's right! Paris is the capital of France. incorrect-feedback: Not quite. The correct answer is Paris. - [x] Paris - [ ] London - [ ] Berlin - [ ] Madrid ::: ::: knowledge-check type: multiple-select question: Which of the following are primary colors? (Select all that apply) correct-feedback: Correct! Red, blue, and yellow are primary colors. incorrect-feedback: Review the primary colors and try again. - [x] Red - [x] Blue - [ ] Green - [x] Yellow - [ ] Orange ::: ::: knowledge-check type: fill-in-the-blank question: The chemical symbol for water is _____. correct-feedback: Correct! Water is H2O. incorrect-feedback: Think about hydrogen and oxygen. - [x] H2O - [x] h2o ::: ::: table headerRow: true borderStyle: all striping: none caption: Example data table | Name | Role | Department | | ------- | --------- | ---------- | | Alice | Engineer | Product | | Bob | Designer | Creative | | Charlie | Manager | Operations | ::: ::: card title: Getting Started Guide subtitle: Everything you need to know style: elevated imageUrl: https://example.com/card-image.jpg imageAlt: Guide cover image imagePosition: top linkUrl: https://example.com/guide linkNewTab: true This is the card body content. It supports **Markdown**. ::: ::: flip-card flipDirection: horizontal flipTrigger: click aspectRatio: 4:3 ## Front title: Question subtitle: Click to reveal What is the speed of light? ## Back title: Answer subtitle: Did you know? The speed of light is approximately **299,792,458 meters per second**. ::: ::: card-carousel style: default cardsPerView: 3 showNavigation: true showDots: true autoplay: false loop: true ## Card One subtitle: First card subtitle imageUrl: https://example.com/card1.jpg imageAlt: Card 1 image Description for card one. ## Card Two subtitle: Second card subtitle imageUrl: https://example.com/card2.jpg imageAlt: Card 2 image Description for card two. ## Card Three subtitle: Third card subtitle imageUrl: https://example.com/card3.jpg imageAlt: Card 3 image Description for card three. ::: ::: flip-card-carousel flipDirection: horizontal flipTrigger: click aspectRatio: 4:3 cardsPerView: 1 showNavigation: true showDots: true loop: true ## Card 1 ### Front title: Safety Rule 1 imageUrl: https://example.com/rule1.jpg ### Back title: Why it matters Detailed explanation of the first safety rule. ## Card 2 ### Front title: Safety Rule 2 imageUrl: https://example.com/rule2.jpg ### Back title: Why it matters Detailed explanation of the second safety rule. :::