Skip to main content

GOV.UK Rails Components

Accordion

Accordion

Home electronics

Entertainment, communication and recreation

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Laundry, cookers and vacuum cleaners

Ut et elementum tortor. Donec a tellus sed sem euismod congue

In et nunc vitae tortor sollicitudin ultrices. Vivamus a purus justo.

Duis a turpis non nunc pulvinar venenatis quis congue mauris

render GovukComponent::AccordionComponent.new(id: 'abc123') do |component|
  component.section(
    heading_text: 'Home electronics',
    summary_text: 'Entertainment, communication and recreation',
    expanded: true) do
      tag.p(class: 'govuk-body') do
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      end
    end

  component.section(heading_text: 'Appliances', summary_text: 'Laundry, cookers and vacuum cleaners') do
    tag.p(class: 'govuk-body') do
      "Ut et elementum tortor. Donec a tellus sed sem euismod congue"
    end
  end

  component.section(heading_text: 'Toys') do
    safe_join([
      tag.p(class: 'govuk-body') do
        "In et nunc vitae tortor sollicitudin ultrices. Vivamus a purus justo."
      end,

      tag.p(class: 'govuk-body') do
        "Duis a turpis non nunc pulvinar venenatis quis congue mauris"
      end
    ])
  end
end

Accordion (using the helper)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

govuk_accordion(id: 'def234') do |accordion|
  accordion.section(heading_text: 'Section 1') do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
  accordion.section(heading_text: 'Section 2', expanded: true) do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
  accordion.section(heading_text: 'Section 3') do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
end

To render the current level as text instead of a link you can pass either nil or an empty string.

Details

Details - with text

The new Ribwich
Now without lettuce
render GovukComponent::DetailsComponent.new(
  summary_text: 'The new Ribwich',
  text: 'Now without lettuce'
)

Details - with block

The new Ribwich
You're way off. Think smaller, and more legs.
render GovukComponent::DetailsComponent.new(summary_text: 'The new Ribwich') do
  tag.strong(%(You're way off. Think smaller, and more legs.))
end

Header without service name

render GovukComponent::HeaderComponent.new(logotype: 'Custom')

Header with a product name and custom description

render GovukComponent::HeaderComponent.new(logotype: 'GOV.UK') do |component|
  component.product_name { "Name" }
end

Header with navigation

render GovukComponent::HeaderComponent.new(logotype: 'A new service', service_name: "It's very good") do |component|
  component.navigation_item(text: 'Page A', href: '/#page-a')
  component.navigation_item(text: 'Page B', href: '/#page-b')
  component.navigation_item(text: 'Page C', href: '/#page-c', active: true)
end

Inset text

Inset text with text param

Bake him away, toys.
render GovukComponent::InsetTextComponent.new(text: 'Bake him away, toys.')

Inset text with text block

Subject is hatless. Repeat, hatless.
render GovukComponent::InsetTextComponent.new do
  "Subject is hatless. Repeat, hatless."
end

No-visited state

Continue
govuk_link_to('Continue', '#', { no_visited_state: true })

Inverse

Continue
govuk_link_to('Continue', '#', { inverse: true })

No underline

Continue
govuk_link_to('Continue', '#', { no_underline: true })

Muted

Continue
govuk_link_to('Continue', '#', { muted: true })

Button (this will render a form that POSTs)

govuk_button_to('/') { 'Home' }

Warning button

govuk_button_to('/', { warning: true }) { 'Delete' }

Secondary button

govuk_button_to('/', { secondary: true }) { 'Go back' }

Disabled button

govuk_button_to('/', { disabled: true }) { 'Create' }

Notification banner

Notification banner

Information

Very important information. Find out more
Any content can be passed in via a block
render GovukComponent::NotificationBannerComponent.new(title_text: 'Information', disable_auto_focus: true) do |notification_banner|
  notification_banner.heading(
    text: 'Very important information.',
    link_text: "Find out more",
    link_href: "#"
  )
  notification_banner.heading do
    ["Any content can", tag.em("be passed in"), "via a block" ].join(" ").html_safe
  end
end

Notification banner with success

render GovukComponent::NotificationBannerComponent.new(title_text: 'Success', success: true, title_heading_level: 3, title_id: "swanky-notifications") do |notification_banner|
  notification_banner.heading(text: 'Something excellent happened')
  notification_banner.heading(
    text: 'Many excellent things happened.',
    link_text: "See them all",
    link_href: "#"
  )
end

Notification banner called via the helper

Warning

Something's afoot
govuk_notification_banner(title_text: "Warning") do |banner|
  banner.heading(text: "Something's afoot")
end

Panel

Panel

Springfield

A noble spirit embiggens the smallest man
render GovukComponent::PanelComponent.new(
  title_text: 'Springfield',
  text: 'A noble spirit embiggens the smallest man')

Phase banner

Phase banner - with text

This is an experimental service – be cautious

render GovukComponent::PhaseBannerComponent.new(
  tag: { text: 'Gamma' },
  text: 'This is an experimental service – be cautious')

Phase banner - with block

This is an Alpha project, ignore everything

render GovukComponent::PhaseBannerComponent.new(tag: { text: 'Alpha' }) do
  tag.strong('This is an Alpha project, ignore everything')
end

Start button

Start button

Department for Education
render GovukComponent::StartButtonComponent.new(
  text: 'Department for Education',
  href: 'https://www.gov.uk/government/organisations/department-for-education')

Summary list

Summary list

Aardvark
The aardvark is vaguely pig-like in appearance
Change
Baboon
Monkeys of the genus Papio
Chinchilla
Either of two species of crepuscular rodents
Change this rodent for a different kind
render GovukComponent::SummaryListComponent.new do |summary_list|
  summary_list.row do |row|
    row.key { 'Aardvark' }
    row.value { 'The aardvark is vaguely pig-like in appearance' }
    row.action(text: "Change", href: '#aardvark', classes: 'tubulidentata')
  end

  summary_list.row do |row|
    row.key(text: 'Baboon')
    row.value(text: 'Monkeys of the genus Papio')
    row.action(href: nil)
  end

  summary_list.row do |row|
    row.key(text: 'Chinchilla')
    row.value(text: 'Either of two species of crepuscular rodents')
    row.action(
      text: 'Change',
      visually_hidden_text: 'this rodent for a different kind',
      href: '#chinchilla',
      classes: 'caviomorpha'
    )
  end
end

Table

Table with slots

List of Pokémon
Name Types Pokédex number
Bulbasaur Grass, Poison 1
Charmander Fire 4
Squirtle Water 7
render GovukComponent::TableComponent.new do |table|
  table.caption { "List of Pokémon" }

  table.head do |head|
    head.row do |row|
      row.cell(header: true, text: 'Name')
      row.cell(header: true, text: 'Types')
      row.cell(header: true, text: 'Pokédex number', numeric: true)
    end
  end

  table.body do |body|
    body.row do |row|
      row.cell(text: 'Bulbasaur')
      row.cell(text: 'Grass, Poison')
      row.cell(text: '1', numeric: true)
    end
  end

  table.body do |body|
    body.row do |row|
      row.cell(text: 'Charmander')
      row.cell(text: 'Fire')
      row.cell(text: '4', numeric: true)
    end
  end

  table.body do |body|
    body.row do |row|
      row.cell(text: 'Squirtle')
      row.cell(text: 'Water')
      row.cell(text: '7', numeric: true)
    end
  end
end

Table from array

Pokémon Type
Treecko 🌾 Grass
Grovyle 🌾 Grass
Torchic 🔥 Fire
Mudkip 💧 Water
Seedot 🌾 Grass
render GovukComponent::TableComponent.new(
  head: %w(Pokémon Type),
  rows: [
    ['Treecko', '🌾 Grass'],
    ['Grovyle', '🌾 Grass'],
    ['Torchic', '🔥 Fire'],
    ['Mudkip', '💧 Water'],
    ['Seedot', '🌾 Grass']
  ]
)

Tabs

Tabs

Days of the week

Monday's child is fair of face

Tuesday's child is full of grace

Wednesday's child is full of woe

render GovukComponent::TabComponent.new(title: 'Days of the week') do |component|
  component.tab(label: 'Monday') do
    tag.p("Monday's child is fair of face", class: 'govuk-body')
  end

  component.tab(label: 'Tuesday') do
    tag.p("Tuesday's child is full of grace", class: 'govuk-body')
  end

  component.tab(label: 'Wednesday') do
    tag.p("Wednesday's child is full of woe", class: 'govuk-body')
  end
end

Tags

Tag colour examples

  • grey
  • green
  • turquoise
  • blue
  • red
  • purple
  • pink
  • orange
  • yellow
tag.ul(class: 'govuk-list') do
  safe_join(
    %w(grey green turquoise blue red purple pink orange yellow)
      .map do |colour|
        tag.li do
          render(GovukComponent::TagComponent.new(text: colour, colour: colour))
        end
      end
  )
end

Warning text

Warning text

WarningTalkin' out of turn, that's a paddlin'
render GovukComponent::WarningTextComponent.new(
  text: "Talkin' out of turn, that's a paddlin'")

Warning text with custom classes

WarningLookin' out the window, that's a paddlin'
render GovukComponent::WarningTextComponent.new(
  text: "Lookin' out the window, that's a paddlin'",
  classes: 'my-custom-class')

Warning text with custom assistive text

Paddlin' warningStarin' at my sandals, that's a paddlin'
render GovukComponent::WarningTextComponent.new(
  text: "Starin' at my sandals, that's a paddlin'",
  icon_fallback_text: "Paddlin' warning")