finalizacao do header e adicao de comentarios em algumas partes do codigo #6

dsgov/templatetags/br_header_tags.py

@@ -4,32 +4,176 @@ from django.utils.html import format_html
 
 register = template.Library()
 
-# Tag simples: <div class="header-top">...</div>
+# =========================
+# BLOCO: TAGS DE ESTRUTURA PRINCIPAL DO HEADER
+# =========================
+
 class SimpleBlockNode(template.Node):
-    def __init__(self, nodelist, tag_open, tag_close):
+    def __init__(self, nodelist, tag_name, default_classes, extra_classes_var=None):
         self.nodelist = nodelist
-        self.tag_open = tag_open
-        self.tag_close = tag_close
+        self.tag_name = tag_name
+        self.default_classes = default_classes
+        self.extra_classes_var = extra_classes_var
 
     def render(self, context):
         content = self.nodelist.render(context)
-        return format_html('{}{}{}', mark_safe(self.tag_open), mark_safe(content), mark_safe(self.tag_close))
+        extra_classes = ''
+
+        if self.extra_classes_var:
+            try:
+                resolved = template.Variable(self.extra_classes_var).resolve(context)
+                extra_classes = f' {resolved}'
+            except template.VariableDoesNotExist:
+                extra_classes = f' {self.extra_classes_var}'
 
-def create_simple_block(name, tag_open, tag_close):
+        if self.tag_name == "header":
+            tag_open = f'<header class="{self.default_classes}{extra_classes}">'
+            tag_inner_container = f'<div class="container-lg">{content}</div>'
+            search_html = context.get('br_header_search_html', '')
+            tag_close = '</header>'
+            return format_html('{}{}{}{}', mark_safe(tag_open), mark_safe(tag_inner_container), mark_safe(search_html), mark_safe(tag_close))
+        else:
+            tag_open = f'<{self.tag_name} class="{self.default_classes}{extra_classes}">'
+            tag_close = f'</{self.tag_name}>'
+            return format_html('{}{}{}', mark_safe(tag_open), mark_safe(content), mark_safe(tag_close))
+
+def create_simple_block(name, tag_name, default_classes):
     def tag_func(parser, token):
+        bits = token.split_contents()
+        extra_classes_var = None
+
+        if len(bits) > 1:
+            for bit in bits[1:]:
+                if bit.startswith('class='):
+                    extra_classes_var = bit.split('=')[1].strip('"\'')
         nodelist = parser.parse(['end_' + name])
         parser.delete_first_token()
-        return SimpleBlockNode(nodelist, tag_open, tag_close)
+        return SimpleBlockNode(nodelist, tag_name, default_classes, extra_classes_var)
     register.tag(name, tag_func)
 
-# Header raiz
-create_simple_block('br_header', '<header class="br-header"><div class="container-lg">', '</div></header>')
-create_simple_block('br_header_top', '<div class="header-top">', '</div>')
-create_simple_block('br_header_bottom', '<div class="header-bottom">', '</div>')
-create_simple_block('br_header_list', '<div class="header">', '</div>')
-create_simple_block('br_list_title', '<div class="title">', '</div>')
+# Header raiz e principais blocos
+create_simple_block('br_header', 'header', 'br-header')           # Header principal
+create_simple_block('br_header_top', 'div', 'header-top')         # Bloco superior do header
+create_simple_block('br_header_bottom', 'div', 'header-bottom')   # Bloco inferior do header
+create_simple_block('br_header_list', 'div', 'header')            # Lista de itens do header
+
+# =========================
+# BLOCO: TAGS DE TÍTULO E SUBTÍTULO
+# =========================
+
+class BrListTitleNode(template.Node):
+    def __init__(self, nodelist, style=None):
+        self.nodelist = nodelist
+        self.style = style
+
+    def render(self, context):
+        content = self.nodelist.render(context)
+
+        if self.style:
+            try:
+                style = template.Variable(self.style).resolve(context)
+            except template.VariableDoesNotExist:
+                style = self.style.strip('"\'')
+        else:
+            style = ""
+
+        return format_html('<div class="title" style="{}">{}</div>', style, mark_safe(content))
+
+@register.tag(name='br_list_title')
+def do_br_list_title(parser, token):
+    bits = token.split_contents()
+    style = None
+
+    for bit in bits[1:]:
+        if bit.startswith("style="):
+            style = bit.split("=", 1)[1]
+
+    nodelist = parser.parse(('end_br_list_title',))
+    parser.delete_first_token()
+
+    return BrListTitleNode(nodelist, style=style)
+
+class BrHeaderTitleNode(template.Node):
+    def __init__(self, nodelist, style):
+        self.nodelist = nodelist
+        self.style = style
+
+    def render(self, context):
+        content = self.nodelist.render(context)
+        style_attr = f' style="{self.style}"' if self.style else ''
+        return mark_safe(f'<div class="header-title"{style_attr}>{content}</div>')
+
+@register.tag(name='br_header_title')
+def do_br_header_title(parser, token):
+    bits = token.split_contents()
+    style = ''
+    if len(bits) > 1:
+        for bit in bits[1:]:
+            if bit.startswith('style='):
+                style = bit.split('=', 1)[1].strip('"\'')
+    nodelist = parser.parse(('end_br_header_title',))
+    parser.delete_first_token()
+    return BrHeaderTitleNode(nodelist, style)
+
+class BrHeaderSubtitleNode(template.Node):
+    def __init__(self, nodelist, style):
+        self.nodelist = nodelist
+        self.style = style
+
+    def render(self, context):
+        content = self.nodelist.render(context)
+        style_attr = f' style="{self.style}"' if self.style else ''
+        return mark_safe(f'<div class="header-subtitle"{style_attr}>{content}</div>')
+
+@register.tag(name='br_header_subtitle')
+def do_br_header_subtitle(parser, token):
+    bits = token.split_contents()
+    style = ''
+    if len(bits) > 1:
+        for bit in bits[1:]:
+            if bit.startswith('style='):
+                style = bit.split('=', 1)[1].strip('"\'')
+    nodelist = parser.parse(('end_br_header_subtitle',))
+    parser.delete_first_token()
+    return BrHeaderSubtitleNode(nodelist, style)
+
+# =========================
+# BLOCO: TAGS DE MENU E AÇÕES
+# =========================
+
+class BrHeaderMenuNode(template.Node):
+    def __init__(self, nodelist, icon_style=''):
+        self.nodelist = nodelist
+        self.icon_style = icon_style
+
+    def render(self, context):
+        content = self.nodelist.render(context)
+        style_attr = f' style="{self.icon_style}"' if self.icon_style else ''
+        return mark_safe(f'''
+        <div class="header-menu">
+            <div class="header-menu-trigger">
+                <button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation">
+                    <i class="fas fa-bars" aria-hidden="true"{style_attr}></i>
+                </button>
+            </div>
+            <div class="header-info">
+                {content}
+            </div>
+        </div> 
+        ''')
+
+@register.tag(name='br_header_menu')
+def do_br_header_menu(parser, token):
+    bits = token.split_contents()
+    icon_style = ''
+    if len(bits) > 1:
+        for bit in bits[1:]:
+            if bit.startswith('icon_style='):
+                icon_style = bit.split('=', 1)[1].strip('"\'')
+    nodelist = parser.parse(('end_br_header_menu',))
+    parser.delete_first_token()
+    return BrHeaderMenuNode(nodelist, icon_style)
 
-# Ações
 class ActionsNode(template.Node):
     def __init__(self, nodelist):
         self.nodelist = nodelist
@@ -43,34 +187,59 @@ def br_header_actions(parser, token):
     parser.delete_first_token()
     return ActionsNode(nodelist)
 
+# =========================
+# BLOCO: TAGS DE LOGO E AVATAR
+# =========================
+
 @register.simple_tag
-def br_header_logo(src, alt, signature=""):
+def br_header_logo(src, alt, signature="", signature_style=""):
+    """
+    Renderiza o logo do header, podendo incluir assinatura customizada.
+    """
     logo_html = format_html('<img src="{}" alt="{}" />', src, alt)
+    style_attr = format_html(' style="{}"', signature_style) if signature_style else ''
+
     if signature:
         return format_html(
             '''<div class="header-logo">
                 {}
                 <span class="br-divider vertical"></span>
-                <div class="header-sign">{}</div>
+                <div class="header-sign"{}>{}</div>
             </div>''',
             logo_html,
+            style_attr,
             mark_safe(signature)
         )
     else:
         return format_html('<div class="header-logo">{}</div>', logo_html)
 
+@register.simple_tag
+def br_header_avatar(icon=""):
+    """
+    Renderiza o avatar do usuário no header.
+    """
+    return format_html('<div class="header-avatar">{}</div>', mark_safe(icon))
+
+# =========================
+# BLOCO: DROPDOWN DE LINKS E FUNÇÕES
+# =========================
+
 class DropdownNode(template.Node):
-    def __init__(self, nodelist, tag_name, class_name):
+    def __init__(self, nodelist, tag_name, class_name, icon_style):
         self.nodelist = nodelist
         self.tag_name = tag_name
         self.class_name = class_name
+        self.icon_style = icon_style
 
     def render(self, context):
         content = self.nodelist.render(context)
+        icon_style_attr = f' style="{self.icon_style}"' if self.icon_style else ''
+        icon_class = 'fa-ellipsis-v' if 'links' in self.tag_name else 'fa-th'
+
         html = f'''
         <div class="{self.tag_name} {self.class_name}">
             <button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir {self.tag_name.replace('-', ' ').title()}">
-                <i class="fas {'fa-ellipsis-v' if 'links' in self.tag_name else 'fa-th'}" aria-hidden="true"></i>
+                <i class="fas {icon_class}" aria-hidden="true"{icon_style_attr}></i>
             </button>
             <div class="br-list">
                 {content}
@@ -85,73 +254,195 @@ def dropdown_tag(name, tag_class):
     def tag_func(parser, token):
         bits = token.split_contents()
         class_name = "dropdown"
-        if len(bits) > 1:
+        icon_style = ""
+
         for bit in bits[1:]:
             if bit.startswith('class='):
                 class_name = bit.split('=')[1].strip('"\'')
+            elif bit.startswith('icon_style='):
+                icon_style = bit.split('=')[1].strip('"\'')
+        
         nodelist = parser.parse([f'end_{name}'])
         parser.delete_first_token()
-        return DropdownNode(nodelist, tag_class, class_name)
+        return DropdownNode(nodelist, tag_class, class_name, icon_style)
+
     register.tag(name, tag_func)
 
-dropdown_tag('br_header_links', 'header-links')
-dropdown_tag('br_header_functions', 'header-functions')
+dropdown_tag('br_header_links', 'header-links')         # Dropdown de links rápidos
+dropdown_tag('br_header_functions', 'header-functions') # Dropdown de funcionalidades
+
+# =========================
+# BLOCO: ITENS DE LISTA E FUNÇÕES
+# =========================
 
 class ItemNode(template.Node):
-    def __init__(self, nodelist, href):
+    """
+    Renderiza um item de link dentro do header, como os links de acesso rápido.
+    """
+    def __init__(self, nodelist, href=None, extra_classes=None, style=None):
         self.nodelist = nodelist
         self.href = href
+        self.extra_classes = extra_classes
+        self.style = style
 
     def render(self, context):
         content = self.nodelist.render(context)
+
+        # Resolve href
+        if self.href:
+            try:
+                href = template.Variable(self.href).resolve(context)
+            except template.VariableDoesNotExist:
                 href = self.href.strip('"\'')
+        else:
+            href = "#"
+
+        # Resolve extra_classes
+        if self.extra_classes:
             try:
-            resolved_href = template.Variable(href).resolve(context)
+                extra_classes = template.Variable(self.extra_classes).resolve(context)
             except template.VariableDoesNotExist:
-            resolved_href = href
-        return format_html('<a class="br-item" href="{}">{}</a>', resolved_href, mark_safe(content))
+                extra_classes = self.extra_classes.strip('"\'')
+        else:
+            extra_classes = ''
+
+        # Resolve style
+        if self.style:
+            try:
+                style = template.Variable(self.style).resolve(context)
+            except template.VariableDoesNotExist:
+                style = self.style.strip('"\'')
+        else:
+            style = ''
+
+        return format_html(
+            '<a class="br-item {}" href="{}" style="{}">{}</a>',
+            extra_classes, href, style, mark_safe(content)
+        )
 
 @register.tag
 def br_item(parser, token):
-    try:
-        tag_name, href = token.split_contents()
-    except ValueError:
-        raise template.TemplateSyntaxError('%r tag requires href argument' % token.contents.split()[0])
+    """
+    Tag para criar um item de link no header.
+    """
+    bits = token.split_contents()
+    tag_name = bits[0]
+
+    href = None
+    extra_classes = None
+    style = None
+
+    for bit in bits[1:]:
+        if bit.startswith("href="):
+            href = bit.split("=", 1)[1]
+        elif bit.startswith("extra_classes="):
+            extra_classes = bit.split("=", 1)[1]
+        elif bit.startswith("style="):
+            style = bit.split("=", 1)[1]
+
     nodelist = parser.parse(['end_br_item'])
     parser.delete_first_token()
-    return ItemNode(nodelist, href)
 
-@register.simple_tag
-def br_function_item(icon, label):
-    return format_html('''
-    <div class="br-item">
-        <button class="br-button circle small" type="button" aria-label="{0}">
-            <i class="fas {1}" aria-hidden="true"></i>
-            <span class="text">{0}</span>
+    return ItemNode(nodelist, href=href, extra_classes=extra_classes, style=style)
+
+class BrFunctionItemNode(template.Node):
+    """
+    Renderiza um item de funcionalidade no header, geralmente com ícone e label.
+    """
+    def __init__(self, icon_class, extra_classes=None, icon_style=None, label=None, label_style=None, aria_label=None):
+        self.icon_class = icon_class
+        self.extra_classes = extra_classes
+        self.icon_style = icon_style
+        self.label = label
+        self.label_style = label_style
+        self.aria_label = aria_label
+
+    def render(self, context):
+        def resolve(value):
+            if value is None:
+                return ''
+            try:
+                return template.Variable(value).resolve(context)
+            except template.VariableDoesNotExist:
+                return value.strip('"\'')
+        
+        icon_class = resolve(self.icon_class)
+        extra_classes = resolve(self.extra_classes)
+        icon_style = resolve(self.icon_style)
+        label = resolve(self.label)
+        label_style = resolve(self.label_style)
+        aria_label = resolve(self.aria_label) or label
+
+        return format_html(
+            '''<div class="br-item {0}">
+                <button class="br-button circle small" type="button" aria-label="{5}">
+                    <i class="fas {1}" aria-hidden="true" style="{2}"></i>
+                    <span class="text" style="{4}">{3}</span>
                 </button>
-    </div>
-    ''', label, icon)
+            </div>''',
+            extra_classes, icon_class, icon_style, label, label_style, aria_label
+        )
+
+@register.tag(name='br_function_item')
+def do_br_function_item(parser, token):
+    bits = token.split_contents()
+    tag_name = bits[0]
+
+    kwargs = {
+        'icon_class': None,
+        'extra_classes': None,
+        'icon_style': None,
+        'label': None,
+        'label_style': None,
+        'aria_label': None,
+    }
+
+    for bit in bits[1:]:
+        if '=' in bit:
+            key, value = bit.split('=', 1)
+            if key in kwargs:
+                kwargs[key] = value
+
+    return BrFunctionItemNode(**kwargs)
+
+# =========================
+# BLOCO: TAGS DE BUSCA E LOGIN
+# =========================
 
 @register.simple_tag
-def br_header_search_trigger():
-    return mark_safe('''
+def br_header_search_trigger(icon_style=""):
+    """
+    Botão para abrir a busca no header.
+    """
+    icon_style_attr = f' style="{icon_style}"' if icon_style else ""
+
+    return mark_safe(f'''
     <div class="header-search-trigger">
         <button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search">
-            <i class="fas fa-search" aria-hidden="true"></i>
+            <i class="fas fa-search" aria-hidden="true"{icon_style_attr}></i>
         </button>
     </div>
     ''')
 
 @register.simple_tag
 def br_header_login():
+    """
+    Início do bloco de login no header.
+    """
     return mark_safe('<div class="header-login">')
 
 @register.simple_tag
 def end_br_header_login():
+    """
+    Fim do bloco de login no header.
+    """
     return mark_safe('</div>')
 
 @register.simple_tag
 def br_button():
+    """
+    Botão de login padrão.
+    """
     return mark_safe('''
     <div class="header-sign-in">
         <button class="br-sign-in small" type="button" data-trigger="login">
@@ -162,38 +453,23 @@ def br_button():
     ''')
 
 @register.simple_tag
-def br_header_avatar(icon=""):
-    return format_html('<div class="header-avatar">{}</div>', mark_safe(icon))
+def br_header_search(placeholder="", icon_style=""):
+    """
+    Campo de busca do header.
+    """
+    icon_style_attr = f' style="{icon_style}"' if icon_style else ""
 
-@register.simple_tag
-def br_header_menu():
-    return mark_safe('''
-    <div class="header-menu">
-        <div class="header-menu-trigger">
-            <button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation">
-                <i class="fas fa-bars" aria-hidden="true"></i>
-            </button>
-        </div>
-        <div class="header-info">
-            <div class="header-title">Título do Header</div>
-            <div class="header-subtitle">Subtítulo do Header</div>
-        </div>
-    </div>
-    ''')
-
-@register.simple_tag
-def br_header_search():
-    return mark_safe('''
+    return mark_safe(f'''
     <div class="header-search">
         <div class="br-input has-icon">
             <label for="searchbox-114">Texto da pesquisa</label>
-            <input id="searchbox-114" type="text" placeholder="O que você procura?"/>
+            <input id="searchbox-114" type="text" placeholder="{placeholder}"/>
             <button class="br-button circle small" type="button" aria-label="Pesquisar">
                 <i class="fas fa-search" aria-hidden="true"></i>
             </button>
         </div>
         <button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search">
-            <i class="fas fa-times" aria-hidden="true"></i>
+            <i class="fas fa-times" aria-hidden="true"{icon_style_attr}></i>
         </button>
     </div>
     ''')

tests/django_dsgov_test1/templates/examples_headers.html

@@ -7,33 +7,48 @@
 {% endblock %}
 
 {% block content %}
+
+  <div class="mb-4">
+    <h2>Exemplos de Headers do Design System do Governo Brasileiro</h2>
+    <h4 class="mt-2">Veja como usar os componentes de Header do Design System.</h4>
+    <ul class="mt-3 text-start" style="display: inline-block;">
+        <li>O Header é um componente importante para a navegação e identidade visual do site.</li>
+        <li>Ele é dividido em duas partes: Topo e Inferior.</li>
+        <li>O Topo contém o logo, ações, links de acesso rápido, funcionalidades do sistema, busca e login.</li>
+        <li>O Inferior contém o menu do Header, título e subtítulo, além da busca.</li>
+        <li>Você pode customizar o Header usando classes e estilos extras.</li>
+        <li>Veja os exemplos abaixo:</li>
+    </ul>
+</div>
+
+  {# HEADER 1: Header padrão, fundo claro, sem customização de cor #}
+  <li class="mb-4">Esse primeiro header usa o tamanho padrão e o fundo branco, que são as configurações originais do componente.</li>
   {% br_header %}
     {% br_header_top %}
-        {% br_header_logo src="data:image/png;base64,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" alt="logo" signature="Assinatura" %}
+      {% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="logo" signature="Assinatura" %}
 
       {% br_header_actions %}
-          {% br_header_links class="dropdown" %}
+        {% br_header_links %}
           {% br_header_list %}
             {% br_list_title %}Acesso Rápido{% end_br_list_title %}
           {% end_br_header_list %}
-            {% br_item "javascript:void(0)" %}Link de acesso 1{% end_br_item %}
-            {% br_item "javascript:void(0)" %}Link de acesso 2{% end_br_item %}
-            {% br_item "javascript:void(0)" %}Link de acesso 3{% end_br_item %}
-            {% br_item "javascript:void(0)" %}Link de acesso 4{% end_br_item %}
+            {% br_item href="#" %}Link de acesso 1{% end_br_item %}
+            {% br_item href="#" %}Link de acesso 2{% end_br_item %}
+            {% br_item href="#" %}Link de acesso 3{% end_br_item %}
+            {% br_item href="#" %}Link de acesso 4{% end_br_item %}
         {% end_br_header_links %}
 
-          {% br_header_functions class="dropdown" %}
+        {% br_header_functions %}
           {% br_header_list %}
             {% br_list_title %}Funcionalidades do Sistema{% end_br_list_title %}
           {% end_br_header_list %}
-            {% br_function_item "fa-chart-bar" "Funcionalidade 1" %}
-            {% br_function_item "fa-headset" "Funcionalidade 2" %}
-            {% br_function_item "fa-comment" "Funcionalidade 3" %}
-            {% br_function_item "fa-adjust" "Funcionalidade 4" %}
+            {% br_function_item icon_class="fa-chart-bar" label="Funcionalidade 1" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-headset" label="Funcionalidade 2" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-comment" label="Funcionalidade 3" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-adjust" label="Funcionalidade 4" aria_label="Acessível" %}
         {% end_br_header_functions %}
 
         {% br_header_search_trigger %}
-          
         {% br_header_login %}
           {% br_button %}
           {% br_header_avatar %}
@@ -43,7 +58,59 @@
 
     {% br_header_bottom %}
       {% br_header_menu %}
-        {% br_header_search %}
+            {% br_header_title %}Título do Header{% end_br_header_title %}
+            {% br_header_subtitle %}Subtítulo do Header{% end_br_header_subtitle %}
+        {% end_br_header_menu %}
+      {% br_header_search placeholder="O que você procura?" %}
+    {% end_br_header_bottom %}
+  {% end_br_header %}
+
+  <br><br><br><br>
+
+  {# HEADER 2: Header customizado, fundo azul escuro, textos e ícones brancos, usando classes e estilos extras #}
+  <li>Esse segundo header é o header customizado, com fundo azul escuro e textos e ícones brancos. Ele usa classes e estilos extras para personalização.</p>
+  {% br_header class="bg-blue-warm-vivid-90" %}
+    {% br_header_top %}
+      {% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="logo" signature="Assinatura" signature_style="color: white;" %}
+
+      {% br_header_actions %}
+        {% br_header_links icon_style="color: white;" %}
+          {% br_header_list %}
+            {% br_list_title style="color: white;" %}Acesso Rápido{% end_br_list_title %}
+          {% end_br_header_list %}
+            {% br_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 1{% end_br_item %}
+            {% br_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 2{% end_br_item %}
+            {% br_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 3{% end_br_item %}
+            {% br_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 4{% end_br_item %}
+        {% end_br_header_links %}
+
+        {% br_header_functions icon_style="color: white;" %}
+          {% br_header_list %}
+            {% br_list_title style="color: white;" %}Funcionalidades do Sistema{% end_br_list_title %}
+          {% end_br_header_list %}
+            {% br_function_item icon_class="fa-chart-bar" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 1" label_style="color: white;" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-headset" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 2" label_style="color: white;" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-comment" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 3" label_style="color: white;" aria_label="Acessível" %}
+            {% br_function_item icon_class="fa-adjust" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 4" label_style="color: white;" aria_label="Acessível" %}
+        {% end_br_header_functions %}
+
+        {% br_header_search_trigger icon_style="color: white;" %}
+        {% br_header_login %}
+          {% br_button %}
+          {% br_header_avatar %}
+        {% end_br_header_login %}
+      {% end_br_header_actions %}
+    {% end_br_header_top %}
+
+    {% br_header_bottom %}
+      {% br_header_menu icon_style="color: white;" %}
+            {% br_header_title style="color: white;" %}Título do Header{% end_br_header_title %}
+            {% br_header_subtitle style="color: white;" %}Subtítulo do Header{% end_br_header_subtitle %}
+        {% end_br_header_menu %}
+      {% br_header_search placeholder="O que você procura?" icon_style="color: white;" %}
     {% end_br_header_bottom %}
   {% end_br_header %}
+
+  <br><br><br><br>
+
 {% endblock %}

tests/django_dsgov_test1/templates/index.html

@@ -8,6 +8,14 @@
 
 {% block content %}
     <div class="container">
+        <h2>Exemplos de Componentes do Design System do Governo Brasileiro</h2>
+        <h4 class="">Veja como usar os componentes do Design System do Governo Brasileiro com Django.</h4>
+        <ul class="text-start" style="display: inline-block;">
+            <li>O Design System do Governo Brasileiro oferece uma série de componentes.</li>
+            <li>Esses componentes são construídos para serem acessíveis e responsivos.</li>
+            <li>Agora você pode usar esses componentes em seus projetos Django para criar interfaces consistentes.</li>
+            <li>Veja os exemplos abaixo para entender como usar cada componente.</li>
+        </ul>
         <div class="br-list" role="list">
             <div class="header">
                 <div class="title">