Deprecated: Return type of Illuminate\Support\Collection::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2060

Deprecated: Return type of Illuminate\Support\Collection::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2071

Deprecated: Return type of Illuminate\Support\Collection::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2083

Deprecated: Return type of Illuminate\Support\Collection::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2098

Deprecated: Return type of Illuminate\Support\Collection::count() should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 2007

Deprecated: Return type of Illuminate\Support\Collection::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1986

Deprecated: Return type of Illuminate\Support\Collection::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/webroot/ROOT/vendor/illuminate/support/Collection.php on line 1955
Helsingborg Styleguide - Version 2.0

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.

atom

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

atom
atom

Organisms

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

Go to organisms