Komponenter — Magello styleguide

Komponent

Knappar

Fem hörn, ingen kant exakt rak. Knappens färg speglar vad den gör: primär (magenta) för huvudhandlingen, sekundär (rosa) för det som backar eller kompletterar.

Prata med oss Vad vi erbjuder

<a class="mg-btn mg-btn--primary" href="#">Prata med oss</a>
<a class="mg-btn mg-btn--secondary" href="#">Vad vi erbjuder</a>

Klass	Utseende	Används till
`.mg-btn--primary`	Magenta, vit text	Skapa, spara, skicka, kontakta. Huvudhandlingen i vyn
`.mg-btn--secondary`	Rose-200, svart text (hover rose-300)	Avbryt, återställ, ”vad vi erbjuder”. Kompletterar den primära
`.mg-btn--icon`	Lägger ikon + text i rad (`inline-flex`, 8 px mellanrum)	Knappar med ikon till vänster om texten

Gör

Högst en primär knapp per vy
Primär först, sekundär efter (eller under i staplat läge)
Skriv ett verb som beskriver handlingen: ”Prata med oss”
Fokus syns som 3 px kontur med 4 px avstånd

Gör inte

Knapp med kant och utan fyllnad (outline)
Flera magenta knappar bredvid varandra
Versaler eller utropstecken i knapptexten
Rundade hörn

Komponent

Kort

Kortvarianten väljs efter innehållet: bild ger bildkort, ikon ger erbjudandekort, annars textkort. Alla är polygoner utan kant och skugga.

Textkort

Förstudier & PoC

Grunden för en lyckad digital lösning läggs tidigt. Vi bygger och testar en Proof of Concept som validerar teknik och affärsnytta.

UX & Tillgänglighet

Vi kombinerar design med data för att skapa intuitiva gränssnitt som människor faktiskt kan och vill använda.

<div class="mg-card-grid">
  <article class="mg-card mg-card--text"><h3>Rubrik</h3><p>Text …</p></article>
</div>

Bildkort

Backend & moln

Systemarkitektur

Vi designar skalbara system som håller.

Agile

Agila leveranser

Korta cykler och tydlig dialog.

Erbjudandekort

Rosa yta med ikon. Hover öppnar formen och går ett steg mörkare.

AI & Automation

Omsätt AI och automation till verklig affärsnytta.

Läs mer →

Cloud

Azure, AWS, GCP och private clouds.

Läs mer →

Kompakt kort och värdekort

Consulting

Expertis i uppdrag

Seniora konsulter som tar ägarskap.

Solutions

Färdiga lösningar

Bygger på beprövade metoder.

Team

Agila team

Anpassar sig efter ert behov.

Personliga

Vi lyssnar och anpassar oss efter varje kunds situation.

Trygga

Stabil leverans med seniora konsulter.

Kort	Klasser	Yta	Används till
Textkort	`.mg-card.mg-card--text`	Vit	Expertisområden, tjänster
Bildkort	`.mg-card.mg-card--image`	Vit	Expertis med foto
Kompakt kort	`.mg-card.mg-card--compact`	Vit	Tre korta fakta i rad
Erbjudandekort	`.mg-offer-card`	Rosa 50	Erbjudanden med ikon, hover
Värdekort	`.mg-value-card`	Rosa 100	Värdeord med ikon
Rutnät	`.mg-card-grid` (`--loose`, `--three`)	—	Placerar kort

Gör

Rubrik (H3) och en kort text per kort
Lägg vita kort på rosa sektion, eller använd rosa kort när formen ska synas
Ny variant = modifier på .mg-card, inte en ny komponent

Gör inte

Löpnummer (01, 02, 03) som dekor
Skugga eller kant runt kortet
Fler än ett budskap per kort
Kort i kort

Komponent

Processteg

Kedjade chevrons som visar ett förlopp. Stegen avlöser varandra i accentfärger. Det sista steget är alltid magenta.

Fas 1Uppstartsfasen

Fas 2Utvecklingsfasen

Fas 3Leveransfasen

Fas 4Förvaltning

<div class="mg-steps" role="list">
  <div class="mg-step mg-step--blue" role="listitem"><span class="mg-step__num">Fas 1</span>Uppstart</div>
  <div class="mg-step mg-step--magenta" role="listitem"><span class="mg-step__num">Fas 2</span>Klar</div>
</div>

Antal steg	Färgordning
2	blå, magenta
3	blå, orange, magenta
4	blå, orange, grön, magenta
6	blå, orange, röd, gul, grön, magenta

Gör

Sista steget i magenta
2–6 steg
Ett litet ”Steg n” eller ”Fas n” ovanför namnet

Gör inte

Magenta i mitten av kedjan
Fler än sex steg
Långa meningar i stegen

Komponent

Citat, infoblock och textruta

Tre sätt att lyfta något ur löptexten. Alla placeras i textflödet, i full bredd, och aldrig i en smal kolumn bredvid texten.

Citat

Vi är generalister med spetskompetens och är inte begränsade till specifika produkter eller metodiker.

Infoblock

Rosa faktaruta med magenta etikett. Flera block läggs efter varandra.

Våra expertisområden

Digitala tjänster — från idé till robust digital produkt
Integration — knyta ihop affärsprocesser
Cloud — skalbara och kostnadseffektiva molnlösningar

Textruta (callout)

Pappersflik uppe till höger. Kort text, gärna med en stor siffra eller symbol som blickfång.

Vi söker nya medarbetare

Är du en erfaren systemutvecklare som vill jobba med oss? Hör av dig!

Gör

Ett citat per vy. Det är ett utdrag, inte en puffruta
Infoblock efter varandra i full bredd, formade som den rosa rutan
Siffror (”Magello i siffror”) i en rad inne i rutan

Gör inte

Högerställda informationsrutor som texten viker undan för
Kantlinje till vänster om ett citat
Citattecknet som fristående ikon eller med opacity
Fler än tre rutor i rad

Tänk på

Ingress och brödtext går alltid i 100 % bredd. Texten återgår till full bredd efter varje ruta

Komponent

Tabell

Rubrikraden är rosa, varannan rad är tonad och första kolumnen är fet. Linjerna i cellerna är funktionella hårlinjer i rosagrått.

Kompetens	Nivå	Certifieringar	Tillgänglig
Systemarkitektur	Senior	TOGAF, AWS SA	Omgående
Backend / Java	Senior	Oracle Java SE	2026-Q1
Testautomatisering	Mid	ISTQB	Omgående
3 konsulter · Uppdaterad 2026-10-19

Gör

Lägg tabellen i .mg-table-wrap så den scrollar sidledes på mobil
Vänsterjustera text, högerjustera siffror
Använd <tfoot> för summering

Gör inte

Mörka linjer eller accentfärgade linjer
Tabeller för layout
Fler än sex kolumner på mobil utan scroll

Komponent

Tidslinje

Årtal i grått, diamantmarkörer i rosa och den nuvarande punkten markerad med magenta fyllnad.

1996

Bolaget grundades i Linköping.

2015

Red Hat utser oss till European Business Partner of the Year.

2026

Magello fyller 30 år.

Gör

Bakgrund rosagrå 50 för hela sektionen
Markera nuvarande år med --highlight
En mening per punkt

Gör inte

Svart bakgrund
Fler än tolv punkter i rad

Tänk på

Den lodräta linjen bör vara platt rose-200. I referenssajten är den ännu magenta med gradient (känd avvikelse)

Komponent

Kontaktkort och uppmaning

Person med foto och kontaktuppgifter, och en avslutande uppmaning med en primär knapp.

Anna Karlsson

Konsultchef

anna@magello.se +46 8 000 00 00

Redo att ta nästa steg?

Oavsett om ni vill utforska ett specifikt område eller diskutera en bredare utmaning — vi lyssnar gärna.

Kontakta oss

Gör

Kontaktkort: namn, titel, e-post, telefon. Foto svartvitt
Uppmaning: rubrik, en kort text och en primär knapp
Placera uppmaningen sist på sidan, före sidfoten

Gör inte

Mer än en primär handling i uppmaningen
Färgfoto i kontaktkortet