Package Exports
- @moduk/frontend
- @moduk/frontend/client
- @moduk/frontend/dist/assets/images/govuk-crest-2x.png
- @moduk/frontend/dist/assets/images/govuk-crest.png
- @moduk/frontend/dist/assets/svg/moduk-header-logo.svg
- @moduk/frontend/dist/client/index.d.ts
- @moduk/frontend/dist/client/index.d.ts.map
- @moduk/frontend/dist/client/moduk-frontend.mjs
- @moduk/frontend/dist/client/moduk-frontend.umd.js
- @moduk/frontend/dist/client/moduk-frontend.umd.js.map
- @moduk/frontend/dist/css/index.css
- @moduk/frontend/dist/lib/index.d.ts
- @moduk/frontend/dist/lib/index.d.ts.map
- @moduk/frontend/dist/lib/index.js
- @moduk/frontend/dist/lib/index.js.map
- @moduk/frontend/dist/lib/utils.d.ts
- @moduk/frontend/dist/lib/utils.d.ts.map
- @moduk/frontend/dist/lib/utils.js
- @moduk/frontend/dist/lib/utils.js.map
- @moduk/frontend/dist/nunjucks/moduk/components/accordion/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/accordion/__examples__/with-summary-lines.njk
- @moduk/frontend/dist/nunjucks/moduk/components/accordion/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/accordion/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/back-link/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/back-link/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/back-link/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/breadcrumbs/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/breadcrumbs/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/breadcrumbs/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/disabled.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/group-link.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/grouping.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/prevent-double-click.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/secondary.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/start.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__examples__/warning.njk
- @moduk/frontend/dist/nunjucks/moduk/components/button/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/button/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__examples__/with-error-message.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__examples__/with-threshold.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__examples__/word-count.njk
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/character-count/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/small.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/with-conditional-reveal.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/with-error-message.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/with-item-hint.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__examples__/with-none-option.njk
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/checkboxes/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/cookie-banner/__examples__/accepted.njk
- @moduk/frontend/dist/nunjucks/moduk/components/cookie-banner/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/cookie-banner/__examples__/rejected.njk
- @moduk/frontend/dist/nunjucks/moduk/components/cookie-banner/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/cookie-banner/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/__examples__/with-date-part-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/__examples__/with-whole-date-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/date-input/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/details/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/details/__examples__/open.njk
- @moduk/frontend/dist/nunjucks/moduk/components/details/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/details/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-message/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-message/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/error-message/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/__examples__/with-description-and-error-list.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/__examples__/with-error-linked-to-checkbox.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/__examples__/with-error-linked-to-date-part.njk
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/error-summary/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/fieldset/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/fieldset/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/fieldset/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/file-upload/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/file-upload/__examples__/with-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/file-upload/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/file-upload/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/footer/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/footer/__examples__/with-links.njk
- @moduk/frontend/dist/nunjucks/moduk/components/footer/__examples__/with-secondary-navigation-and-links.njk
- @moduk/frontend/dist/nunjucks/moduk/components/footer/__examples__/with-secondary-navigation.njk
- @moduk/frontend/dist/nunjucks/moduk/components/footer/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/footer/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/header/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/header/__examples__/with-service-name-and-navigation.njk
- @moduk/frontend/dist/nunjucks/moduk/components/header/__examples__/with-service-name-and-no-service-url.njk
- @moduk/frontend/dist/nunjucks/moduk/components/header/__examples__/with-service-name.njk
- @moduk/frontend/dist/nunjucks/moduk/components/header/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/header/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-fixed-width.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-fluid-width.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-hint.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-numeric.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-prefix-and-suffix.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-prefix.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__examples__/with-suffix.njk
- @moduk/frontend/dist/nunjucks/moduk/components/input/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/input/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/inset-text/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/inset-text/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/inset-text/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/notification-banner/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/notification-banner/__examples__/success.njk
- @moduk/frontend/dist/nunjucks/moduk/components/notification-banner/__examples__/with-html.njk
- @moduk/frontend/dist/nunjucks/moduk/components/notification-banner/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/notification-banner/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/on-the-first-page.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/on-the-last-page.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/with-ellipses.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/with-link-labels.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__examples__/with-next-and-previous-only.njk
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/pagination/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/panel/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/panel/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/panel/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/__examples__/beta.njk
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/__examples__/with-tag-override.njk
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/__examples__/with-text.njk
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/phase-banner/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/inline.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/small.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/with-conditional-reveal.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/with-divider-option.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/with-error-message.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__examples__/with-item-hint.njk
- @moduk/frontend/dist/nunjucks/moduk/components/radios/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/radios/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/select/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/select/__examples__/with-hint.njk
- @moduk/frontend/dist/nunjucks/moduk/components/select/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/select/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/skip-link/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/skip-link/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/skip-link/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__examples__/cards-with-action.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__examples__/cards.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__examples__/with-no-actions.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__examples__/with-no-border.njk
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/summary-list/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/table/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/table/__examples__/with-comparative-numbers.njk
- @moduk/frontend/dist/nunjucks/moduk/components/table/__examples__/with-customised-column-widths.njk
- @moduk/frontend/dist/nunjucks/moduk/components/table/__examples__/with-large-caption.njk
- @moduk/frontend/dist/nunjucks/moduk/components/table/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/table/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tabs/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tabs/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/tabs/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/blue.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/green.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/grey.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/orange.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/pink.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/purple.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/red.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/turquoise.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__examples__/yellow.njk
- @moduk/frontend/dist/nunjucks/moduk/components/tag/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/tag/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/__examples__/not-as-page-heading.njk
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/__examples__/with-custom-height.njk
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/__examples__/with-error.njk
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/textarea/macro.njk
- @moduk/frontend/dist/nunjucks/moduk/components/warning-text/__examples__/default.njk
- @moduk/frontend/dist/nunjucks/moduk/components/warning-text/__tests__/macro.test.ts
- @moduk/frontend/dist/nunjucks/moduk/components/warning-text/macro.njk
- @moduk/frontend/src/css/__tests__/_colour-palette.test.scss
- @moduk/frontend/src/css/__tests__/index.test.ts
- @moduk/frontend/src/css/_colour-palette.scss
- @moduk/frontend/src/css/_variables.scss
- @moduk/frontend/src/css/components/_header.scss
- @moduk/frontend/src/css/components/_tag.scss
- @moduk/frontend/src/css/index.scss
- @moduk/frontend/src/react/back-link/__examples__/default.tsx
- @moduk/frontend/src/react/header/__examples__/default.tsx
- @moduk/frontend/src/react/header/__examples__/with-service-name-and-navigation.tsx
- @moduk/frontend/src/react/header/__examples__/with-service-name-and-no-service-url.tsx
- @moduk/frontend/src/react/header/__examples__/with-service-name.tsx
Readme
MOD.UK Frontend
MOD.UK Frontend contains the code for components you’ll need to build user interfaces for Defence products and services.
See guidance on the components with coded examples.
Support
You can report bugs or request new features.
Email design-system@digital.mod.uk if you have questions or any feedback. Please share examples of how you are using MOD.UK Frontend.
Get started
You need to install MOD.UK Frontend to use the components in the MOD.UK Design System in your production environment.
See setup guide for developers which shows you how to start using MOD.UK Frontend.
Design library
Design and prototype your Defence project with our component design library in Figma.
Browser and assistive technology support
MOD.UK Frontend aims to support:
- recommended browsers
- recommended assistive technologies
- your users overriding colours in Windows, Firefox and Chrome
Accessibility
Using MOD.UK Frontend will help your service meet level AA of WCAG 2.1. But you must still check that your service meets accessibility requirements, especially if you extend or modify components.
You should also use the JavaScript from MOD.UK Frontend.
Accessibility warnings: known issues
If you get a warning from a linter or accessibility checker, check a list of issues you should not need to fix.
Getting updates
To be notified when there’s a new release you can watch the moduk-frontend repository. (After selecting ‘Watch’, choose the ‘Custom’ option and select ‘Releases’.)
Security
If you have found a security vulnerability, please let us know so we can fix it.
Report a vulnerability on an MOD system.
Licence
Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation. The documentation is © Crown copyright and available under the terms of the Open Government 3.0 licence.