Developers
The primary goal of the design system is to significantly contribute to the development of Government of Ireland digital products - increasing consistency, quality, efficiency, and accessibility. This is through a set of detailed guidelines and components as both data-driven HTML components and React components.
If you an engineer looking to get started with the design system, select your technology stack below for more information:
Use the HTML components with HTML markup.
If you are using plain HTML files with no server side technology, we recommend using the HTML components with the HTML markup directly.
You should favour global components where available over local components. Local components are marked as deprecated in the HTML components Storybook when a global equivalent is available.
Use the HTML components with Jinja macros.
If you are using Python based server side technology such as Django or Wagtail, we recommend using the HTML components and favouring global components over local components where possible.
Global components provide macros that are compatible with Jinja. You should configure your environment to use Jinja templates. The global HTML components can then be imported as macros which provides an abstraction over the underlying HTML markup.
For local components, you must use the HTML markup directly.
Use the HTML components with Nunjucks macros.
If you are using Node, we recommend using the HTML components and favouring global components over local components where possible.
Global components provide macros that are compatible with Nunjucks. You should configure your environment to use Nunjucks templates. The global HTML components can then be imported as macros which provides an abstraction over the underlying HTML markup.
For local components, you must use the HTML markup directly.
Use the React components.
If you are building React applications with Next.js or Vite, then you should use the React components.
The components are in early development, so the set available will expand over time as we go through the component globalisation process.
Use the guidelines.
You are using a technology stack that is currently not supported. We recommend that you investigate the HTML components to see if they may be appropriate for your use case.
Alternatively, you may decide to develop your own set of components directly, in which case they should follow the guidelines available to ensure consistency with the design system.
If you believe your technology stack should be supported by the design system, then please contact the design system team.