The Marble versions of these components can be found on the [Common components](https://www.figma.com/design/nIpahk0b9VMaeEnubiO33g/New-websites?node-id=92-2&t=qgGsGnRAzuUQou9H-1) page in Figma. The sizing, spacing, color and typography of each component in Figma has been customized relative to its counterpart in Bootstrap. However, Marble follows Bootstrap's default behavior for interactive states – including, for example:
* Nudging the shade or tint of background colors by 10% for hover and 20% for active states.
* Applying custom 4px focus rings to select components (e.g. buttons) using the current background color at 25% opacity.
* Reducing the opacity to 65% when disabled.
*️⃣ Components marked with an asterisk are yet to be added to Figma.
### Responsive design
The layout and content of new web pages respond to fit users’ devices, in accordance with the principles of [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). Marble websites are designed using Bootstrap 5.3's [12 column grid system](https://getbootstrap.com/docs/5.3/layout/grid/), and intended to use its [default breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/).
