pdh-design-system/src/introduction.mdx

PDH Design System React Components

## PDH Design System React

This Storybook contains the UI components for PDH projects.
Utilising **Bootstrap 5.3** and exported for use in Typescript/React projects. Each component
has its own story showcasing various different states and variations. 
Below, you'll
find guidance on how to navigate and use this Storybook effectively.

## Getting Started

To begin, select a component from the sidebar on the left. You can then view
the different stories associated with that component, each representing a
unique state or variation. Our components leverage the power and flexibility of
Bootstrap 5.3, ensuring responsive and accessible designs.

## Usage

Each story is interactive and can be modified using the parameters available in the
addons panel. These parameters allow you to change the properties of the components
and see how they react in real-time.

The components are made available with the pdh-design-system npm package.

## Responsive (if used responsibly)

The layout is divided into 12 columns and has a number of breakpoints.
Please default to setting widths of all elements based on the grid.

Add col classes to choose how many columns wide (out of 12) the element should be.
You can add extra col classes for different breakpoints to allow different widths based on device size.

For example "col-6" would take up half the columns inside the main container
"col-6 col-lg-4"
And this would take up half until the screen reaches the large breakpoint, at which time the element takes up only 4 of 12 columns.

For a sidebar that is full width (stacked on top) until a wider breakpoint you might use.
col-12 col-lg-4 or similar.

https://getbootstrap.com/docs/5.3/layout/grid/