Design System
Colors
colors.twig
Variations
Primary colors
$bermuda.bg-bermuda.text-bermuda
$coral.bg-coral.text-coral
$honey.bg-honey.text-honey
$blue.bg-blue.text-blue
$gray-dark.bg-gray-dark.text-gray-dark
$smoke.bg-smoke.text-smoke
Secondary colors
$bermuda-light.bg-bermuda-light.text-bermuda-light
$coral-light.bg-coral-light.text-coral-light
$honey-light.bg-honey-light.text-honey-light
$blue-light.bg-blue-light.text-blue-light
$gray.bg-gray.text-gray
$smoke-light.bg-smoke-light.text-smoke-light
Additional colors
$white.bg-white.text-white
$black.bg-black.text-black
$gray-light.bg-gray-light.text-gray-light
$transparent.bg-transparent
Icons
icons.twig
Variations
Lukio logo
.icon-swatch-logo{% include "assets/images/lukio-logo.svg" %}
.icon-swatch-logo{% include "assets/images/lukio-logo.svg" %}
.icon-swatch-logo{% include "assets/images/lukio-logo.svg" %}
.icon-swatch-logo{% include "assets/images/lukio-logo.svg" %}
.icon-swatch-logo{% include "assets/images/lukio-logo.svg" %}
Arrow Right
.fill-white{% include "assets/images/arrow-right.svg" %}
.fill-gray-dark{% include "assets/images/arrow-right.svg" %}
.fill-white{% include "assets/images/arrow-right.svg" %}
.fill-white{% include "assets/images/arrow-right.svg" %}
.fill-white{% include "assets/images/arrow-right.svg" %}
Arrow Left
.fill-white{% include "assets/images/arrow-left.svg" %}
.fill-gray-dark{% include "assets/images/arrow-left.svg" %}
.fill-white{% include "assets/images/arrow-left.svg" %}
.fill-white{% include "assets/images/arrow-left.svg" %}
.fill-white{% include "assets/images/arrow-left.svg" %}
Search
.fill-white{% include "assets/images/search.svg" %}
.fill-gray-dark{% include "assets/images/search.svg" %}
.fill-white{% include "assets/images/search.svg" %}
.fill-white{% include "assets/images/search.svg" %}
.fill-white{% include "assets/images/search.svg" %}
Hamburger
.fill-white{% include "assets/images/hamburger.svg" %}
.fill-gray-dark{% include "assets/images/hamburger.svg" %}
.fill-white{% include "assets/images/hamburger.svg" %}
.fill-white{% include "assets/images/hamburger.svg" %}
.fill-white{% include "assets/images/hamburger.svg" %}
Map Marker
.fill-white{% include "assets/images/map-marker.svg" %}
.fill-gray-dark{% include "assets/images/map-marker.svg" %}
.fill-white{% include "assets/images/map-marker.svg" %}
.fill-white{% include "assets/images/map-marker.svg" %}
.fill-white{% include "assets/images/map-marker.svg" %}
SoMe Snapchat
.fill-white{% include "assets/images/snapchat.svg" %}
.fill-gray-dark{% include "assets/images/snapchat.svg" %}
.fill-white{% include "assets/images/snapchat.svg" %}
.fill-white{% include "assets/images/snapchat.svg" %}
.fill-white{% include "assets/images/snapchat.svg" %}
SoMe Instagram
.fill-white{% include "assets/images/instagram.svg" %}
.fill-gray-dark{% include "assets/images/instagram.svg" %}
.fill-white{% include "assets/images/instagram.svg" %}
.fill-white{% include "assets/images/instagram.svg" %}
.fill-white{% include "assets/images/instagram.svg" %}
SoMe Twitter
.fill-white{% include "assets/images/twitter.svg" %}
.fill-gray-dark{% include "assets/images/twitter.svg" %}
.fill-white{% include "assets/images/twitter.svg" %}
.fill-white{% include "assets/images/twitter.svg" %}
.fill-white{% include "assets/images/twitter.svg" %}
SoMe Facebook
.fill-white{% include "assets/images/facebook.svg" %}
.fill-gray-dark{% include "assets/images/facebook.svg" %}
.fill-whitefill-white{% include "assets/images/facebook.svg" %}
.fill-whitefill-white{% include "assets/images/facebook.svg" %}
.fill-whitefill-white{% include "assets/images/facebook.svg" %}
SoMe Whatsapp
.fill-white{% include "assets/images/whatsapp.svg" %}
.fill-gray-dark{% include "assets/images/whatsapp.svg" %}
.fill-white{% include "assets/images/whatsapp.svg" %}
.fill-white{% include "assets/images/whatsapp.svg" %}
.fill-white{% include "assets/images/whatsapp.svg" %}
.fill-white{% include "assets/images/pdf.svg" %}
.fill-gray-dark{% include "assets/images/pdf.svg" %}
.fill-white{% include "assets/images/pdf.svg" %}
.fill-white{% include "assets/images/pdf.svg" %}
.fill-white{% include "assets/images/pdf.svg" %}
Typography
typography.twig
Variations
H1 Tässä paketissa on materiaalia,
H2 Tässä paketissa on materiaalia,
H3 Tässä paketissa on materiaalia, jota piirit
H4 Tässä paketissa on materiaalia, jota piirit
H5 Tässä paketissa on materiaalia, jota piirit
H6 Tässä paketissa on materiaalia, jota piirit
Lead paragraph text
Tässä paketissa on materiaalia, jota piirit voivat hyödyntää omassa viestinnässään. Mukana on esimerkiksi graafinen ohjeistus, jota saa noudattaa, jos homma tuntuu vielä vähän epävarmalta. Mutta sitä saa rohkeasti soveltaa, jos luovuus iskee! Paketin tärkein ominaisuus on tarjota ne kuuluisat työkalut paikallisen viestinnän tekemiseen.
Normal Paragraph text
Tässä paketissa on materiaalia, jota piirit voivat hyödyntää omassa viestinnässään. Mukana on esimerkiksi graafinen ohjeistus, jota saa noudattaa, jos homma tuntuu vielä vähän epävarmalta. Mutta sitä saa rohkeasti soveltaa, jos luovuus iskee! Paketin tärkein ominaisuus on tarjota ne kuuluisat työkalut paikallisen viestinnän tekemiseen.
Small Paragraph text
Tässä paketissa on materiaalia, jota piirit voivat hyödyntää omassa viestinnässään. Mukana on esimerkiksi graafinen ohjeistus, jota saa noudattaa, jos homma tuntuu vielä vähän epävarmalta. Mutta sitä saa rohkeasti soveltaa, jos luovuus iskee! Paketin tärkein ominaisuus on tarjota ne kuuluisat työkalut paikallisen viestinnän tekemiseen.
Extra Small Paragraph text
Tässä paketissa on materiaalia, jota piirit voivat hyödyntää omassa viestinnässään. Mukana on esimerkiksi graafinen ohjeistus, jota saa noudattaa, jos homma tuntuu vielä vähän epävarmalta. Mutta sitä saa rohkeasti soveltaa, jos luovuus iskee! Paketin tärkein ominaisuus on tarjota ne kuuluisat työkalut paikallisen viestinnän tekemiseen.
Badge
badge.twig
Variables
classes- A string of classes to be applied to the element.
label- Label for the badge.
heading- Is this badge using h elements and which. Need to write the HTML element without braces.
href- If this badge is a link.
color- The text color of the badge.
bg_color- The background color of the badge.
Variations
H1 badge.
Badge
{% include badge/badge.twig %}
Blue category badge.
#Kategoria
{% include badge/badge.twig %}
Black category badge.
#Kategoria
{% include badge/badge.twig %}
Bermuda category badge.
#Kategoria
{% include badge/badge.twig %}
Coral category badge.
#Kategoria
{% include badge/badge.twig %}
Breadcrumbs
breadcrumbs.twig
Variables
breadcrumbs- An array of urls and labels to be output in the breadcrumbs.
Variations
A success alert that stays in place
{% include breadcrumbs/breadcrumbs.twig %}
Button
button.twig
Variables
classes- A string of classes to be applied to the element.
data- An object of properties to values to be added as data attributes.
disabled- A boolean to indicate if the element should be visually and functionally disabled.
label- Label for the button.
type- The type of the button element (button or submit).
Variations
Disabled button.
{% include "button/button.twig" with { classes: "btn-primary disabled", label: "Button", href: "", disabled: false } %}
A Primary button.
{% include "button/button.twig" with { classes: "btn-primary", label: "Button", href: "", disabled: false } %}
A Secondary button.
{% include "button/button.twig" with { classes: "btn-secondary", label: "Button", href: "", disabled: false } %}
A button for read more section.
{% include "button/button.twig" with { classes: "btn-readmore-section", label: "Button", href: "", disabled: false } %}
link.twig
Variables
active- A boolean if this button is active.
classes- A string of classes to be applied to the element.
data- An object of properties to values to be added as data attributes.
disabled- A boolean to indicate if the element should be visually and functionally disabled.
label- Label for the button.
type- The type of the button element (button or submit).
href- Where link should link to.
target- A boolean if this link should open in a new tab.
archive- If this link for the archive page
Variations
Heading link.
{% include "button/link.twig" with { classes: "h2", label: "LINKKI", href: "https://pixels.fi", disabled: "false", target: "" } %}
Plain text link.
{% include "button/link.twig" with { classes: "", label: "paketissa", href: "https://pixels.fi", disabled: "false", target: "" } %}
Bacl to acrhive link.
{% include "button/link.twig" with { classes: "back-to-archive", label: "Takaisin listaan", href: "https://pixels.fi", disabled: "false", target: "" } %}
Input
input.twig
Variables
classes- String. Classes to be applied to the element.
disabled- Boolean. Indicates if the element should be visually and functionally disabled. False by default.
help_text- String. Helper text for the field
help_text_classes- String. Classes that are applied to the helper text. 'text-muted' by default
id- String. Id of the field.
label- String. Label for the form.
label_classes- String. Label classes.
name- String. Form name.
placeholder- String. Placeholder text.
autofocus- Boolean. Indicates if this field is focused by default. False by default.
readonly- Boolean. Indicates if this field is read only. False by default.
required- Boolean. Indicates if the field is required. False by default.
type- String. The type of the field. 'text' by default
value- String. Value of the field.
Variations
select.twig
Variables
classes- String. Classes for the input.
disabled- Boolean. If the input is disabled. False by default.
help_text- String. Help text for the input.
help_text_classes- String. Classes for the help text.
id- String. Id attribute for the input.
label- String. Label for the input.
label_classes- String. Label for the
name- String. Name attribute for the input
options- Array. Array of options for the select.
placeholder- String. Placeholder for the input.
readonly- Boolean. If the input is read-only.
required- Boolean. If the input is required.
type- String. The input type.