Design system
Use this page to discover what’s available and copy-paste useful patterns.
Typography
Heading level 1
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 2
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 3
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 3 spread
over two lines
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 4
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 5
Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.
Heading level 6
Large paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
Medium/Default paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
Small paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum. Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque. Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Aliquam ut orci sapien.
- Pellentesque fermentum porta nibh tincidunt congue.
- Curabitur dignissim purus eget eleifend ultrices.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
- Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
- Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Aliquam ut orci sapien.
- Pellentesque fermentum porta nibh tincidunt congue.
- Curabitur dignissim purus eget eleifend ultrices.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
- Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
- Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
Spacious bullet list style
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
- Cras ipsum nunc, ullamcorper elementum cursus sed, congue non mauris. Sed viverra ante nec sem scelerisque, non faucibus ante pellentesque.
Spacious numbered list style
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum. Donec suscipit sed tortor vel dictum.
- Pellentesque fermentum porta nibh tincidunt congue.
- Curabitur dignissim purus eget eleifend ultrices.
- Aliquam quis tellus orci.
- Fusce dictum sodales bibendum.
- Nunc eros ex, scelerisque vel ullamcorper quis, mollis eget lacus. Morbi ultricies dui est, eleifend congue massa tincidunt vitae.
Buttons
Button sizing
Horizontal buttons
Centered horizontal buttons
Vertical buttons
On top of background colors
Group block
Group block
Row variation
Row variation
Row variation – centered
Row variation – centered
Stack variation
Stack variation
Stack variation – centered
Stack variation – centered
Grid variation
Grid variation
Grid variation
Grid variation
Columns block
Column
Column
Column
Column
Column
Links
Inline links on light background
Normal
The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.
Disabled
The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.
Inline links on dark background
Normal
The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.
Disabled
The seasons this is a link greater years make great, fly place seas, also in fourth moved open whales that firmament you’ll don’t over first were stars spirit grass brought likeness kind.
Quote
Quote desktop – But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.
Author of quote
Pullquote
Quote desktop – But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth.
Author of quote
Image blocks
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
Sample Page
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
UI-elementit
Napit ja lomake-elementit löytyvät yltä. Tässä osiossa ovat murupolku, karuselli ja haitari.
Murupolku
gds/breadcrumb renderöityy vain kerran per sivupyyntö: single-pohjat tulostavat sen jo otsikon yläpuolelle, joten sisältöön lisätty toinen lohko jää tyhjäksi.
Tagit
core/paragraph -lohkon tyyli is-style-tag. Sama pilleri kuin gds/post-header -lohkon taglinessa, mutta kirjoitettavissa mihin tahansa — esim. sertifikaattirivi group row -lohkossa.
ISO 22000
FSSC
HACCP
Hyvää Suomesta
Karuselli
Haitari
Tuotteet säilyvät jääkaappilämpötilassa avaamattomana pakkaukseen merkittyyn päiväykseen asti. Avattu pakkaus käytetään kahden vuorokauden kuluessa.
Kuumenna tuote pakkauksessa vesihauteessa tai combi-uunissa. Tarkat ohjeet löytyvät jokaisen tuotteen tuotesivulta.
Pakastaminen ei ole tarpeen: lämpötilavapaat tuotteet säilyvät jopa 18 kuukautta ilman lisäaineita.
gds/accordion on teemam oma, web component -pohjainen haitari. WordPressin oma core/accordion on myös käytössä ja tyylitelty — toimiala- ja konsepti-patternit käyttävät sitä, koska se tukee alignwidea ja on ydinlohko.
Haitari (core/accordion)
Tuotteet säilyvät jääkaappilämpötilassa avaamattomana pakkaukseen merkittyyn päiväykseen asti.
Kuumenna tuote pakkauksessa vesihauteessa tai combi-uunissa.
Pakastaminen ei ole tarpeen: tuotteet säilyvät jopa 18 kuukautta ilman lisäaineita.
Ikonit
Koko ikonirekisteri (resources/blocks/icon/icons.js). Ikonin nimi on lohkon icon-attribuutti.
custom/mobile
custom/at
custom/asiakaspalvelu
brands/facebook
brands/twitter
brands/youtube
regular/apple-whole
regular/at
regular/bowl-spoon
regular/circle-arrow-right
regular/circle-arrow-up
regular/circle-arrow-down
regular/circle-arrow-up-right
regular/circle-check
regular/circle-question
regular/circle-three-quarters-stroke
regular/copy
regular/envelope
regular/flag
regular/garage
regular/hand-wave
regular/handshake
regular/house
regular/industry-windows
regular/landmark
regular/leaf-heart
regular/link
regular/mobile
regular/recycle
regular/rotate-left
regular/screwdriver-wrench
regular/share-nodes
regular/store
regular/timer
regular/user-group-simple
regular/utensils
solid/arrow-right
solid/arrow-up-right
solid/arrow-up
solid/arrow-down
solid/calendar-week
solid/circle-check
solid/circle-exclamation
solid/circle-info
solid/check
solid/chevron-down
solid/chevron-left
solid/chevron-right
solid/magnifying-glass
solid/star
solid/xmark
Ikonityyli: is-style-circle
Kortit
Info-kortti
Kotimaisuus
Pääosa raaka-aineista Suomesta, tuotanto Pyhännällä ja Kokkolassa.
Vastuullisuus
Lämpötilavapaa logistiikka vähentää hävikkiä ja energiankulutusta.
Ravitsemus
Reseptit on suunniteltu yhdessä ravitsemusasiantuntijoiden kanssa.
Info-kortti CTA:lla
Suoraan Feeliasta
Tilaa suoraan tehtaalta ilman välikäsiä. Toimitukset koko Suomeen, myös pienille keittiöille.
- Ei minimitilausmäärää
- Toimitus 2–4 arkipäivässä
- Oma yhteyshenkilö
Vinkit tarjoiluun
- Sopii hyvin isolle aamupalaselle.
- Tarjoile lämpimänä tai huoneenlämpöisenä.
- Täydennä tuoreilla yrteillä.
Info-kortti: is-style-horizontal
Vastaamme yhteydenottoon 2 arkipäivän sisällä.
Ikonikortti
Tuotekortti
Blogikortti
Tuotteemme valmistetaan suomessa
Marjavasulle ja sen Delimax tuoteperheelle on myönnetty Avainlippu-merkin käyttöoikeus! Avainlippu kertoo, että tuote on valmistettu tai palvelu on tuotettu Suomessa ja työllistää Suomessa. Toivotamme kaikille oikein mehukasta kesää!
Fodelia Oyj on hankkinut osakevaihdolla Marjavasu Oy:n koko osakekannan
Elintarvikealan holding-yhtiö Fodelia Oyj kasvattaa yritysportfoliotaan, ja hankkii osakevaihdolla foodservice-markkinoilla toimivan Marjavasu Oy:n. Fodelia Oyj lehdistötiedote 31.8.2022 klo 11.10 Fodelia Oyj on hankkinut osakevaihdolla kuopiolaisen Marjavasu Oy:n koko osakekannan. Marjavasu Oy on yksi Suomen merkittävimmistä mehuvalmistajista, joka valmistaa Delimax-brändillään foodservice-markkinalle erilaisia mehutiivisteitä sekä hedelmä- ja marjasoseita. Lisäksi Marjavasun tuoteportfolioon kuuluvat erilaiset mehuautomaatit. ”Tämä on meille…
Rekryuutisia
Viime vuoden lopulla haimme Etelä-Suomen alueelle myyntipäällikköä ihan uuteen tehtävään. Hyvien hakijoiden joukosta vaskooliimme seuloutui kultahippu: asiakaspalvelun ja asiakasratkaisujen suvereeni ammattilainen Jenni Mäkelä (36). Hän aloitti tehtävässään tammikuussa 2023. Jenni on Marjavasun uusi kultahippu! Jenni on koulutukseltaan tradenomi (rahoitus ja liiketalous). Hänen työhistoriassaan on pankkialan lisäksi elintarvike-, hyvinvointi- ja elämystoimialojen tehtäviä: Jennille ovat tuttuja raakakakkutehtaan…
Tuoteryhmät
Media ja teksti
Mediakortti
Kouluruokaopas
Suomalaisissa kunnissa testatut mallit kouluruokailun uudistamiseen – ravitsemus, talous, käytäntö.
Media & teksti (core)
Heading short
Feelian valmisruoat on kehitetty ammattikeittiöiden arkeen: tasalaatuisia, nopeita lämmittää ja helppoja annostella.
Media & teksti on single-sivujen vakiorakenne. imageFill (Rajaa kuva täyttämään palsta) kroppaa kuvan, jolloin palsta pysyy designin 440 px korkuisena — ilman sitä pystykuva venyttää koko rivin. Kuvan puoli valitaan lohkon asetuksista.
Referenssinosto
Lime-pohja is-style-wave -tyylillä, kuva ja kolme otsikko/teksti-paria sekä CTA. Käytössä toimiala- ja konsepti-sivuilla.
Näin ratkaisimme sen asiakkaalle
Lähtötilanne
Asiakkaan keittiössä erityisruokavaliot vaativat päivittäin käsityötä.
Ratkaisu
Rakensimme valikoiman, jossa komponentit tulevat vakioituina.
Tulos
Vähemmän hävikkiä ja tasaisempi laatu.
Aikajana
Lähtötilanne
Kartoitamme keittiön nykytilanteen, volyymit ja ruokalistan yhdessä kanssasi.
Ratkaisu
Rakennamme tuotevalikoiman ja toimitusrytmin, joka sopii teidän arkeenne.
Tulos
Vähemmän hävikkiä, tasaisempi laatu ja enemmän aikaa itse ruoanlaittoon.
gds/timeline renderöi vain askeleet. Kun designissa on kuva askelten vierellä, kelaa aikajana core/media-text -lohkon sisään (kuvan puoli valitaan media-text-lohkon asetuksista).
CTA ja luvut
Uutiskirje
— UUTISKIRJE
Pysy ajan tasalla
Uutuudet, käyttöideat ja ammattikeittiöiden kuulumiset suoraan sähköpostiisi.
HubSpot-lomake näyttää editorissa paikkamerkin ja jää etusivulla tyhjäksi, kunnes formId (HubSpotin lomake-GUID) on asetettu.
CTA
Etkö löytänyt etsimääsi?
Kerro meille, mitä keittiösi tarvitsee. Etsimme ratkaisun yhdessä – tai kehitämme sellaisen.
Luvut
17 v.
kokemusta ammattikeittiöiden palvelemista
150 +
tuotetta valikoimassa
jopa 18 kk
säilyvyyttä ilman lisäaineita
2 kpl
tehdasta Suomessa: Pyhännällä ja Kokkolassa
Osion otsikko ja linkki
Uudet tuotteet
Tuoreimmat valmistuotteet ammattikeittiöille – vieritä ja tutustu.
Herot
Osiohero (ilman kuvaa)
Hae tuotteet
Yli 150 valmisruokaa ammattikeittiöille. Selaa tuoteryhmittäin tai hae nimellä, tuotekoodilla tai ruokavaliolla.
Etusivun hero (kuvalla)
Hyvä huominen on tänään lautasella
Uskomme, että hyviä asioita tapahtuu heille, jotka uskaltavat katsoa tulevaisuuteen.
Single-sivun hero
Toimiala-, konsepti- ja resepti-sivujen hero (Figma 211:4820 / 213:6056): core/media-text, jossa tag-pilleri, h1, lead ja CTA:t. h1 sisällössä estää templaten oman gds/post-header-heron, joten sivulle ei tule kahta heroa.
Toimialaratkaisu
Otsikko heroon
Lyhyt johdantoteksti, joka kertoo mistä sivulla on kysymys.
Sivun otsikko
Design System
gds/resepti-hero jää tässä esittämättä: se hakee tiedot resepti-postauksesta eikä sivustolla ole vielä yhtään reseptiä.
Taulukot
Tuotelohkot lukevat oletuksena sivun kontekstin. Design system -sivulla tuote osoitetaan tuoteId-attribuutilla.
Allergeenit ja ainesosat
Ravintoarvot
Haku (core/search)
Yli 150 tuotetta ammattikeittiön arkeen
Keitosta mehuihin, lämpimistä lämpötilavapaisiin. Selaa valikoimaa kategorian mukaan.
Galleria (core/gallery)
HTML (core/html)
Query (core/query, core/post-template, core/query-no-results)
Taulukko (core/table)
| Y-tunnus | 2113001-5 |
| Operaattori | Maventa |
| Operaattorin OVT-tunnus | 003721291126 |
| Verkkolaskutusosoite (OVT) | 003721130015 |
| Pankkiverkkotunnus | DABAFIHH |
| Lasku pdf-nä sähköpostiin | 21130015@scan.netvisor.fi |
Paperilaskut
Feelia Oy
21130015
PL 100
80020 Kollektor Scan
Huomioittehan, että tähän osoitteeseen ei saa lähettää mitään muuta kuin laskuja. Kirjeenvaihto, tiedotteet ja markkinointimateriaalit postiosoitteeseemme.
