My Presentation

<div class="brand-bar"></div>
<p class="supertitle">Conference Name</p>

# My Presentation

<p class="subtitle">A brief description of what this talk covers</p>

### Structure Tokens — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{brand-bar}
{supertitle}Conference Name{/supertitle}

# My Presentation

{subtitle}A brief description{/subtitle}

{footer}Your Name &middot; 8/17/2026{/footer}
</code></pre>

---

## Inline Colors

- <span class="blue">Quarkus blue</span> for primary emphasis
- <span class="green">Spring green</span> for secondary emphasis
- <span class="teal">Red Hat teal</span> for accents

### Inline Colors — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{blue}Quarkus blue{/blue} for primary emphasis
{green}Spring green{/green} for secondary emphasis
{teal}Red Hat teal{/teal} for accents
</code></pre>

---

## More Colors

- <span class="red">Red</span> for warnings or alerts
- <span class="orange">Orange</span> for highlights
- <span class="highlight">Bold highlight</span> for key points
- <span class="dimmed">Dimmed text</span> for secondary details

### More Colors — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{red}Red{/red} for warnings or alerts
{orange}Orange{/orange} for highlights
{highlight}Bold highlight{/highlight} for key points
{dimmed}Dimmed text{/dimmed} for secondary details
</code></pre>

---

## Table

| Criteria  | Project A         | Project B         |
|-----------|-------------------|-------------------|
| Tests     | <span class="green">Pass</span> | <span class="red">Fail</span>  |
| Perf      | <span class="teal">Best</span>   | <span class="green">Pass</span> |
| Coverage  | <span class="green">92%</span>  | <span class="red">41%</span>   |

### Table — syntax

<pre><code class="language-markdown" data-trim data-noescape>
| Criteria  | Project A           | Project B          |
|-----------|---------------------|--------------------|
| Tests     | {green}Pass{/green}  | {red}Fail{/red}   |
| Perf      | {teal}Best{/teal}    | {green}Pass{/green}|
</code></pre>

---

## Two Columns

<div class="brand-bar"></div>
<p class="subtitle">Side-by-side layout</p>

### Left column

- <span class="highlight">First point</span> · with context
- <span class="highlight">Second point</span> · more detail
- <span class="highlight">Third point</span> · additional info

</div>
<div>

### Right column

- <span class="red">Warning item</span>
- A medium task takes <span class="highlight">2-4 weeks</span>
- Hard to estimate ROI
- Teams defer → technical debt grows

</div>
</div>

### Two Columns — syntax

### Left column

- {highlight}First point{/highlight}
- {highlight}Second point{/highlight}

</div>
<div>

### Right column

- {red}Warning item{/red}
- Another point

</div>
</div>
</code></pre>

Note:
The two-col layout uses CSS grid. It stays as HTML because it needs child structure.
A three-col variant is also available: `<div class="three-col">`.

---

## Callouts

<div class="callout">Default callout — neutral gray border.</div>

<div class="callout teal-callout">Teal callout — tips and recommendations.</div>

<div class="callout red-callout">Red callout — warnings and breaking changes.</div>

### Callouts — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{callout}Default callout — neutral gray border.{/callout}
{callout-teal}Teal callout — tips.{/callout-teal}
{callout-red}Red callout — warnings.{/callout-red}
{callout-orange}Orange callout — notices.{/callout-orange}
</code></pre>

---

## Flow Diagram

<div class="flow" style="justify-content: center;">
<span class="flow-step">Design</span>
<span class="flow-arrow">→</span>
<span class="flow-step">Implement</span>
<span class="flow-arrow">→</span>
<span class="flow-step">Test</span>
<span class="flow-arrow">→</span>
<span class="flow-step">Deploy</span>
</div>

### Flow Diagram — syntax

<pre><code class="language-markdown" data-trim data-noescape>
<div class="flow" style="justify-content: center;">
{flow-step}Design{/flow-step}
{flow-arrow}
{flow-step}Implement{/flow-step}
</div>
</code></pre>

---

## Image

### Image — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{img src="image/quarkus.png" width="60%" center}
</code></pre>

Note:
Parameters: src (required), width, alt, center/right/left, rounded

---

## Code

<pre><code class="language-java" data-trim data-noescape>
@Path("/hello")
public class GreetingResource {

@GET
    @Produces(MediaType.TEXT_PLAIN)
    public String hello() {
        return "Hello from Quarkus!";
    }
}
</code></pre>

Note:
Use fenced code blocks with a language tag for syntax highlighting.

---

## Video

### Video — syntax

<pre><code class="language-markdown" data-trim data-noescape>
{video src="image/demo.mp4" controls width="90%" center rounded}
</code></pre>

Note:
Parameters: src (required), controls, autoplay, loop, muted, width, center/right/left, rounded

---

## Summary

- Point 1 · tested and validated
- Point 2 · ready for production
- Next step: your feedback

---

## Questions?

Note:
Thank the audience and open for questions.