%div{ class: badge.title.gsub(' ', '-') }
  .col-lg-12
    %h4
      = badge.title.capitalize
    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, header_options: { class: 'gl-display-flex gl-align-items-center' }) do |c|
      - c.header do
        .gl-flex-grow-1
          %b
            = badge.title.capitalize
            ·
          = badge.to_html
        = render 'shared/ref_switcher', destination: 'badges', align_right: true
      - c.body do
        .row
          .col-md-2.gl-text-center
            Markdown
          .col-md-10.code.js-syntax-highlight
            = highlight_badge('.md', badge.to_markdown, language: 'markdown')
        .row
          %hr
        .row
          .col-md-2.gl-text-center
            HTML
          .col-md-10.code.js-syntax-highlight
            = highlight_badge('.html', badge.to_html, language: 'html')
        .row
          %hr
        .row
          .col-md-2.gl-text-center
            AsciiDoc
          .col-md-10.code.js-syntax-highlight
            = highlight_badge('.adoc', badge.to_asciidoc)