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::Accordion.new(id: 'abc123') do |component|
  component.slot(:section,
    title: 'Home electronics',
    summary: 'Entertainment, communication and recreation',
    expanded: true) do
      tag.p(class: 'govuk-body') do
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      end
    end

  component.slot(:section,
    title: 'Appliances', summary: '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.slot(:section, title: '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.add_section(title: 'Section 1') do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
  accordion.add_section(title: 'Section 2', expanded: true) do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
  accordion.add_section(title: 'Section 3') do
    tag.p(class: 'govuk-body') do
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    end
  end
end

Details

Details - with text

The new Ribwich
Now without lettuce
render GovukComponent::Details.new(
  summary: 'The new Ribwich',
  description: 'Now without lettuce'
)

Details - with block

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

Header without service name

render GovukComponent::Header.new(logo: 'Custom')

Header with a product name and custom description

render GovukComponent::Header.new(logo: 'GOV.UK', product_name: "Custom product name") do |component|
  component.slot(:product_description) { render(GovukComponent::Tag.new(text: 'Coming soon!', colour: 'yellow')) }
end

Header with navigation

render GovukComponent::Header.new(logo: 'Some service') do |component|
  component.slot(:item, title: 'Page A', href: '/#page-a')
  component.slot(:item, title: 'Page B', href: '/#page-b')
  component.slot(:item, title: 'Page C', href: '/#page-c', active: true)
end

Inset text

Inset text

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

Notification banner

Notification banner

Information

Very important information. Find out more.

Any content can be passed in via a block

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

Notification banner with success

Success

Something excellent happened

Many excellent things happened. See them all.

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

Notification banner called via the helper

Warning

Something's afoot

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

Panel

Panel

Springfield

A noble spirit embiggens the smallest man
render GovukComponent::Panel.new(
  title: 'Springfield',
  body: 'A noble spirit embiggens the smallest man')

Phase banner

Phase banner - with text

This is an experimental service – be cautious

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

Phase banner - with block

This is an Alpha project, ignore everything

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

Start now button

Start now button

Department for Education
render GovukComponent::StartNowButton.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
render GovukComponent::SummaryList.new do |component|
  component.slot(
    :row,
    key: 'Aardvark',
    value: 'The aardvark is vaguely pig-like in appearance',
    action: link_to('Change', '#aardvark')
  )

  component.slot(
    :row,
    key: 'Baboon',
    value: 'Monkeys of the genus Papio'
  )

  component.slot(
    :row,
    key: 'Chinchilla',
    value: 'Either of two species of crepuscular rodents',
    action: link_to('Change', '#chinchilla')
  )
end

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::Tabs.new(title: 'Days of the week') do |component|
  component.slot(:tab, title: 'Monday') do
    tag.p("Monday's child is fair of face", class: 'govuk-body')
  end

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

  component.slot(:tab, title: '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::Tag.new(text: colour, colour: colour))
        end
      end
  )
end

Warning

Warning

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

Warning with custom classes

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

Warning with custom icon fallback text

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