{#def item #}
<div class="card h-100 shadow-sm">
    <div class="card-body">
        <div class="d-flex align-items-center mb-3">
            <span class="fs-4 me-2">{{ item.icon }}</span>
            <h5 class="card-title mb-0">{{ item.name }}</h5>
        </div>
        <p class="card-text">{{ item.description }}</p>
    </div>
</div>

{#def title, items #}
...
  <div class="row mt-3">    
    <!-- Teste com JSON pré-processado no Python -->
    {% for item in items %}
    <div class="col-md-4 mb-3">
      <CardBootstrap item="{{ item }}" />
    </div>
    {% endfor %}
  </div>
...

@app.get("/components")
async def components_demo(request: Request):
    """demo to components JinjaX"""
    items = [
        {"name": "FastAPI", "description": "Framework web moderno e rápido", "icon": "⚡"},
        {"name": "JinjaX", "description": "Componentes reutilizáveis para Jinja2", "icon": "🧩"},
        {"name": "Uvicorn", "description": "Servidor ASGI de alta performance", "icon": "🚀"},
        {"name": "Bootstrap", "description": "Framework CSS responsivo", "icon": "🎨"},
        {"name": "Python", "description": "Linguagem de programação poderosa", "icon": "🐍"},
        {"name": "VS Code", "description": "Editor de código com debug integrado", "icon": "💻"}
    ]
    return templates.TemplateResponse("ComponentsDemo.jinja", {
        "request": request,
        "title": "Demonstração de Componentes",
        "items": items
    })