PDH Design System

This Theme and site configuration example, contains all the core UI components for PDH projects, built with
Bootstrap 5 and integrated seamlessly with **Drupal 10/11** and react component support. Within the react repository each component
has its own story showcasing its different states and variations. And for Drupal, we have this example site demonstrating the components, along with some suggested ways to render them within Drupal.  

Getting Started

To begin, select a component from the menu in the header section. You can then view
examples of that component, each representing a
unique state or variation. Our components leverage the power and flexibility of
Bootstrap 5, ensuring responsive and accessible designs.

Usage

Each component has usage instructions included. 
In some cases, a component will be entirely demonstrated using HTML in the page that will pick up the bootstrap css and js interactivity to show how it would render using this theme. 
In other cases, some Drupal entity types and fields or views have been created for sample purposes, to showcase them as they might get used in a new dashboard or project.
Documentation is included for both if both are present, and in some cases, suggestions for how you might utilise them further such as by modifying twig files or display modes, are included.

Default components

Some components are present on all or most pages, and don't have their own pages, they are documented here.

Header

The header is broken into a few main components, such as the user menu, the main menu, breadcrumb and the search bar. Additionally a full hero header can be found in the molecules menu.
The breadcrumb rendering has been improved using the easy breadcrumb module

Footer

Footer is a region split into multiple regions, with blocks able to be placed in those regions. Currently there are 3x menu blocks placed into those regions