CloudsAndTrails

    HTML Components & Reference Guide

    4 min read

    Available Languages :

    HTML Reference Guide

    While Markdown is powerful, sometimes we need to go beyond standard text formatting to visually enrich our pages. In this Quartz-based digital garden, you can freely use raw HTML inside any page.

    This guide contains custom CSS classes already designed for the site and standard HTML5 tags that look great in Markdown. Just like the Markdown guide, you can use this as a cheat sheet!

    Bohemian Rhapsody Queen

    1. Custom Site Components

    These are special designs embedded in the site’s CSS (custom.scss) that you can copy-paste into any post:

    A. Stats Grid (about-stats)

    Used to quickly list numbers or achievements side by side:

    <div class="about-stats">
  <div class="stat-item">
    <span class="stat-number">10+</span>
    <span class="stat-label">Years Experience</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">Azure</span>
    <span class="stat-label">Primary Platform</span>
  </div>
  <div class="stat-item">
    <span class="stat-number">Ultra</span>
    <span class="stat-label">Marathon Runner</span>
  </div>
</div>

    Preview:

    10+ Years Experience
    Azure Primary Platform
    Ultra Marathon Runner

    B. Technology Tags (Tech Chips)

    Pill-shaped tags to list skills, languages, or tools:

    <div class="tech-chips">
  <span class="tech-chip">Azure</span>
  <span class="tech-chip">Terraform</span>
  <span class="tech-chip">Kubernetes</span>
  <span class="tech-chip">DevOps</span>
  <span class="tech-chip">Cloud-Native</span>
</div>

    Preview:

    Azure Terraform Kubernetes DevOps Cloud-Native

    C. Grid Cards

    If you want to present features, services, or detailed items in a grid layout with icons:

    <div class="about-grid">
  <div class="about-card">
    <span class="about-card-icon">☁️</span>
    <h3>Cloud Architect</h3>
    <p>Designing enterprise solutions in the Microsoft Azure ecosystem...</p>
  </div>
  <div class="about-card">
    <span class="about-card-icon">🏃</span>
    <h3>Endurance Athlete</h3>
    <p>Patience and mental resilience...</p>
  </div>
</div>

    Preview:

    ☁️

    Cloud Architect

    Designing enterprise solutions in the Microsoft Azure ecosystem...

    🏃

    Endurance Athlete

    Patience and mental resilience...

    D. Contact / Hover Cards

    Action-oriented cards that glow with orange/gold details on hover:

    <div class="contact-grid">
  <div class="contact-card contact-card--primary" style="cursor: default;">
    <span class="contact-card-icon">📧</span>
    <h3>Send Mail</h3>
    <p>mertyavuz@example.com</p>
    <div class="contact-card-action">Reach me →</div>
  </div>
</div>

    Preview:

    📧

    Send Mail

    mertyavuz@example.com

    Reach me →

    2. Useful Standard HTML Tags

    You can enrich your content using native HTML without needing any custom CSS classes.

    Keyboard Shortcuts (<kbd>)

    To show commands or key combinations to users. Press Ctrl + C (or Cmd + C on Mac) to copy.

    <kbd>Cmd</kbd> + <kbd>C</kbd>

    Abbreviations (<abbr>)

    Dotted structures that reveal their meaning on hover. IaC is the cornerstone of modern architectures.

    <abbr title="Infrastructure as Code">IaC</abbr>

    Collapsible Details (<details> and <summary>)

    Very similar to Obsidian callouts, but a standard, clean HTML format.

    Click here to see more info...

    This text was hidden until you clicked. You can add as much HTML or text inside as you want.

    <details>
  <summary>Click here to see more info...</summary>
  <p>
    This text was hidden until you clicked. You can add as much HTML or text inside as you want.
  </p>
</details>

    Loading and Progress Bar (<progress>)

    Even if not dynamic, use this to show a visual completion rate:

    Project Completion Status: 75%

    <progress value="75" max="100">75%</progress>

    Text Highlighting (<mark>)

    The HTML equivalent of Markdown’s == (highlight) syntax. Please do not skip reading this part.

    <mark>do not skip reading this part</mark>

    Embed iframe (Video or Map)

    To embed a video or an external page:

    <iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
></iframe>

    Preview: