{html, [
  {head, [
    {title, [<<"This is an example">>]},
    {link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre.min.css"}, []},
    {link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"}, []},
    {link, #{rel => "stylesheet", href => "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"}, []},
    {script, #{src => "https://unpkg.com/htmx.org@1.9.9"}, []}
  ]},
  {body, [
    {'header', #{class => "navbar"}, [
      {section, #{class => "navbar-section"}, [
        {a, #{href => "#", class => "navbar-brand mr-2"}, <<"Gabarit HTML">>},
        {a, #{href => "#", class => "btn btn-link"}, <<"Introduction">>},
        {a, #{href => "#", class => "btn btn-link"}, <<"Docs">>}
      ]},
      {section, #{class => "navbar-section"}, [
        {'div', #{class => "input-group input-inline"}, [
          {input, #{class => "form-input", type => "text", placeholder => "search"}, []},
          {button, #{class => "btn btn-primary input-group-btn"}, <<"search">>}
        ]}
      ]}
    ]},
    {'div', #{class => "container"}, [
      {'div', #{class => "columns"}, [

        % card 1
        {'div', #{class => "card"}, [
          {'div', #{class => "card-images"}, [
            {img, #{src => "https://picsum.photos/id/1/300/200", class => "img-responsive"}}
          ]},
          {'div', #{class => "card-header"}, [
            {'div', #{class => "card-title h5"}, [<<"card 1">>]},
            {'div', #{class => "card-subtitle text-gray"}, [<<"This is card subtitle">>]}
          ]},
          {'div', #{class => "card-body"}, [<<"This is the body!">>]},
          {'div', #{class => "card-footer"}, [
            {button, #{class => "btn btn-primary"}, <<"refresh">>}
          ]}
        ]},
        % card 2
        {'div', #{class => "card"}, [
          {'div', #{class => "card-images"}, [
            {img, #{src => "https://picsum.photos/id/2/300/200", class => "img-responsive"}}
          ]},
          {'div', #{class => "card-header"}, [
            {'div', #{class => "card-title h5"}, [<<"test">>]},
            {'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
          ]},
          {'div', #{class => "card-body"}, [<<"test">>]},
          {'div', #{class => "card-footer"}, [
            {button, #{class => "btn btn-primary"}, <<"refresh">>}
          ]}
        ]},
        % card 3
        {'div', #{class => "card"}, [
          {'div', #{class => "card-images"}, [
            {img, #{src => "https://picsum.photos/id/3/300/200", class => "img-responsive"}}
          ]},
          {'div', #{class => "card-header"}, [
            {'div', #{class => "card-title h5"}, [<<"test">>]},
            {'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
          ]},
          {'div', #{class => "card-body"}, [<<"test">>]},
          {'div', #{class => "card-footer"}, [
            {button, #{class => "btn btn-primary"}, <<"refresh">>}
          ]}
        ]},
        % card 4
        {'div', #{class => "card"}, [
          {'div', #{class => "card-images"}, [
            {img, #{src => "https://picsum.photos/id/4/300/200", class => "img-responsive"}}
          ]},
          {'div', #{class => "card-header"}, [
            {'div', #{class => "card-title h5"}, [<<"test">>]},
            {'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
          ]},
          {'div', #{class => "card-body"}, [<<"test">>]},
          {'div', #{class => "card-footer"}, [
            {button, #{class => "btn btn-primary"}, <<"refresh">>}
          ]}
        ]},
        % card 5
        {'div', #{class => "card"}, [
          {'div', #{class => "card-images"}, [
            {img, #{src => "https://picsum.photos/id/5/300/200", class => "img-responsive"}}
          ]},
          {'div', #{class => "card-header"}, [
            {'div', #{class => "card-title h5"}, [<<"test">>]},
            {'div', #{class => "card-subtitle text-gray"}, [<<"test">>]}
          ]},
          {'div', #{class => "card-body"}, [<<"test">>]},
          {'div', #{class => "card-footer"}, [
            {button, #{class => "btn btn-primary"}, <<"refresh">>}
          ]}
        ]}
      ]}
    ]}
  ]}
]}.