1. Component Guide
  2. Highlight boxes
  3. Default
Highlight boxes example

Default

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/highlight_boxes", {
  items: [
    {
      link: {
        text: "If your child is taken into care",
        path: "/child-into-care"
      },
      metadata: {
        document_type: "Detailed guide"
      }
    },
    {
      link: {
        text: "High needs funding",
        path: "/high-needs-funding"
      },
      metadata: {
        document_type: "Guide"
      }
    },
    {
      link: {
        text: "Joint Statement of the 4th meeting of the UK-China High-Level People to People Dialogue",
        path: "/government/publications/joint-statement-of-the-4th-meeting-of-the-uk-china-high-level-people-to-people-dialogue"
      },
      metadata: {
        document_type: "Policy paper"
      }
    }
  ]
} %>