🔧 Development Examples - Visual Components Library

⚠️ This page is only available in development mode (npm run dev).

This page demonstrates various visual components available for use in blog posts. It won't be included in production builds (npm run build), making it perfect for testing and documentation during development.

How it works

The build system now supports two modes:

  • Development mode: npm run dev - includes all pages, including dev- prefixed ones
  • Production mode: npm run build - excludes development-only pages for cleaner deployments

Visual Lists

Compact Activity List

Perfect for listing skills, features, or activities with a modern look:

  • First Item

    Description of the first item goes here. Can be as long as needed.

  • Second Item

    Description of the second item. Notice the alternating background colors.

  • Third Item

    Third item description. Hover effects make the list interactive.

Standard Activity List

For when you need more spacing:

  • Feature One

    Detailed description with more space for content.

  • Feature Two

    Another feature with its own description and styling.

  • Feature Three

    Third feature completing the list with visual appeal.

Callout Components

Info Callout

Information
This is an informational callout. Use it to highlight helpful tips, additional context, or useful information that supports the main content.

Warning Callout

Warning
This is a warning callout. Use it to alert readers about potential issues, deprecated features, or things that require caution.

Danger Callout

Danger
This is a danger callout. Use it for critical warnings, breaking changes, or things that could cause serious problems if ignored.

Success Callout

Success
This is a success callout. Use it to highlight achievements, completed tasks, or positive outcomes.

Rocket Callout

Launch Ready
This is the rocket callout! Use it for exciting features, launches, performance improvements, or anything that deserves special attention. Perfect for highlighting new capabilities or breakthrough moments.

Summary Callout (New!)

Principais Pontos
  • Este é o novo callout de resumo estilo InfoQ para destacar os principais insights de um artigo
  • Use-o no início dos posts técnicos para fornecer um preview dos takeaways mais importantes
  • Cada ponto deve ser uma frase completa e independente que funcione sozinha
  • Ideal para leitores com pouco tempo que querem capturar o valor essencial rapidamente
  • Mantém a linguagem natural em português, evitando traduções diretas do inglês

Usage Instructions

To use these callouts in your markdown files, copy the HTML structure above. The key components are:

  1. Container: <div class="tip tip-TYPE"> where TYPE is one of: info, warn, danger, success, rocket, or summary
  2. Title with Icon: 
    <div class="tip-title">
<svg class="tip-icon" aria-hidden="true" focusable="false">
<use href="#icon-TYPE"></use>
</svg>
Your Title
</div>
  3. Content: Regular HTML or markdown content inside the tip container. For summary callouts, use HTML <ul><li> structure for better spacing and native bullet points.

The icons automatically adapt to both light and dark themes, matching the callout border colors for visual consistency.