Components

The style guide is intended for websites within Helsingborgs stad and others who use our platform. The guide provides examples, markup and themes for our standardized components. The Helsingborg Styleguide is a flexible and minimalistic component-based framework built in the BEM standard & designed around the Atomic Design principle.

Atomic design

We based our component structure on the Atmoic Design System. This allows us to build components with a deliberate goal.

The Atomic Design System give structure to the components by organising them in three different levels: Atoms, Molecules and Organisms.

Atoms

Atoms are the fundamental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Go to atoms

Molecules

Molecules are the next level in the Atomic Design System. These are components that bring funtionality and interactive elements to your pages.

Go to molecules

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Go to organisms