STYLING.md

Styleguide link

Zuri Master Guide - For typography, color palette, iconography, imagery, buttons, forms and spacing.

FE Quality Control Docs - For guidelines on how to contributeto the frontend.

Styling in Zuri Main

To avoid style clashes use css modules when styling in Zuri Main for example

// IS NOT VALID UNLESS REFERENCING A STYLE MADE AVAILABLE IN THE GLOBAL STYLESHEET
const TestComponent = () => {
  return <div style={`testComponentDiv`}></div>;
};
export default TestComponent;

// IS VALID
import style from "./styles.module.css";

const TestComponent = () => {
  return <div style={`${style.testComponentDiv}`}></div>;
};
export default TestComponent;