<%= render 'govuk_publishing_components/components/heading', { text: GovukPublishingComponents::Config.component_guide_title, heading_level: 1, font_size: "xl", margin_bottom: 8 } %>

Components are packages of template, style, behaviour and documentation that live in your application.

See the govuk_publishing_components gem for further details, or a list of all component guides.

Read about how to release a new version of the gem
View component audits

<% if !ENV["MAIN_COMPONENT_GUIDE"] %>

Components in this application (<%= @component_docs.length %>)

<%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
<%= component_doc.description %>

Gem components used by this app (<%= @used_components.length %>)

<%= render "govuk_publishing_components/components/details", { title: "Suggested imports for this application" } do %> <%= render "govuk_publishing_components/components/textarea", { label: { text: "Add this to your application's main scss file, before your other local imports." }, name: "main-sass", value: @components_in_use_sass } %> <%= render "govuk_publishing_components/components/textarea", { label: { text: "Add this to your application's main js file, before your other local imports." }, name: "main-js", value: @components_in_use_js } %> <% end %>

<%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
<%= component_doc.description %>

Gem components not used by this app (<%= @unused_components.length %>)

<%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
<%= component_doc.description %>

<% else %>

<%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
<%= component_doc.description %>

<% end %>

If you cannot find a suitable component consider extending an existing component or creating a new one.