Design system v2

Komponent-galleri: visuel review-checkpoint

Hver komponent renderet isoleret. Sammenlign mod _migration/design-reference/. Når disse er godkendt, bygges forsiden i skridt 7 ud fra dem.

1 · Typografi

Single-family Manrope, 400 og 700. Title-prefix-split mekanisk på første kolon.

Kokkekniv test: De 8 bedste modeller

Sektion-overskrift inde i artikel

Underafsnit (h3)

Mindre overskrift (h4)

Body på Manrope 400. Et godt valg af kokkekniv afhænger ikke kun af stålet — også af håndtagets balance og hvordan klingen falder i hånden. Inline link vises i navy.

Frederik Jensen · 4. marts 2025 · Indeholder reklamelinks

2 · Farve-palette

Pixel-samplet fra _migration/design-reference/. WCAG AA verificeret på body-tekst.

surface
#FFFFFF
Whole canvas, header, footer
surface-subtle
#F6F6F7
Banner placeholder, comment-form bg
ink
#0E0E12
Body text, h1-h4
ink-muted
#6B6B73
Byline, dates, INDEHOLDER REKLAMELINKS
accent
#6CC890
Title prefix, FAVORIT, numbered list, accent rules
accent-deep
#4FA974
Hover state for accent
cta
#FA0A56
Pill-CTA fill (LÆS ARTIKLEN, TJEK PRIS HER)
cta-hover
oklch(from #FA0A56 calc(l - 0.10) c h)
CTA hover (-10% L mod cta)
link
#3858A0
Inline links in article body
logo-sage
#63816F
Logo only, not reused as UI
line
#E8E8EC
Hairline dividers, card edges

3 · SiteHeader

Hvid sticky header med hamburger ☰ + centreret SVG-logo + søgeikon 🔍 og en tynd nav-række under. Logoet er fra public/assets/gastroworld-logo.svg (vector). Headeren ses i toppen af denne side.

4 · ArticleCard — vertical (forside-grid)

Title-prefix splittes ved første kolon: prefix i grøn, suffix i sort. Samme font, samme størrelse.

5 · ArticleCard — compact (sidebar)

88px thumbnail venstre, titel højre. Bruges i SidebarLatest.

6 · SidebarLatest widget

Typografisk header med thin grøn rule under (ikke teal-strip).

7 · CTA-knap

Pille-form, hot pink (#FA0A56), pixel-samplet fra cta-pink-button.png og tjek-pris-cta.png.

8 · NotchBanner (sektion-flag)

Grøn flag-banner med chevron-notch i højre side. Bruges som sektion-header umiddelbart over #1-produktet i review-roundups, og til NYHED-flag i sidebar eller indlejret i artikler. Erstatter det tidligere FAVORIT-diamond, som var en fejlfortolkning af live-design. Cirkulære "WINNER 2025"-badges på live-billeder er bagt ind i selve billedfilerne — ingen komponent.

#1: Bedste kokkekniv
#1: Bedste støbejernsgryde
Nyhed

9 · ProductBox

Valgfri NotchBanner ovenover (sat via winnerLabel), numreret grøn firkant + produktnavn + billede + beskrivelse + pros/cons + pink CTA. Numreret og pink CTA fra spec §5.4 + §5.2.

#1: Bedste kokkekniv

USHI Yuki-onna Gyuto 210mm

USHI Yuki-onna Gyuto 210mm

Hvis du er seriøs omkring madlavning — uanset om du er professionel kok eller passioneret amatør — er Yuki-onna Gyuto det oplagte valg i 2025. Den japanske VG10-stål kerne kombineret med dansk-fokuseret ergonomi giver en kniv der både er skarp og rart at bruge igennem en hel madlavnings-session.

Fordele

  • Skarphed der holder
  • Velbalanceret
  • Smukt finish

Ulemper

  • Pris i den høje ende
  • Kræver håndvask

MAC Chef Series Gyuto

MAC Chef Series Gyuto

En pålidelig nummer-to-position. MAC Chef er en kniv mange professionelle vælger som arbejdshest — ikke fordi den er den bedste, men fordi den er konsistent.

Fordele

  • Solid all-rounder
  • God til prisen

Ulemper

  • Mister skarphed hurtigere end konkurrenten

9c · Fordele / Ulemper

To kasser side-by-side med ens højde. Grøn flueben før hvert fordel-punkt, rødt kryds før hvert ulempe-punkt. Ingen sorte ikoner ved siden af overskrifterne. På mobil stables de.

Fordele

  • Ekstrem skarphed der holder længere end konkurrenterne
  • God balance og ergonomi i hele arbejdssessionen
  • Holdbarhed og kantretention takket være VG-10-kerne
  • Alsidig klinge til både fisk, kød og grøntsager
  • Æstetisk flot damaskus-stål design

Ulemper

  • Prisen er i den højere ende
  • Ikke velegnet til opvaskemaskine

9e · Pull-quote (blockquote)

Stor display-citat med bookmark-ikon i venstre side og en uppercase-tracked cite-kilde under selve citatet. Bruges når artiklen vil løfte en pointe ud af brødteksten.

Vi sammenligner vestlige kokkeknive og japanske gyutos i vores kokkekniv test, så du kan finde den, der passer til dig.

Find din kokkekniv i vores store købsguide herunder

9d · Closing CTA-boks (slut-pris-CTA)

Bruges som afslutning på hver produkt-sektion: lys sage-tonet kasse med centreret overskrift, produkt-billede, lille caption og en pink TJEK PRIS HER-pille. WP-markup (wp-block-group.is-style-cnvs-block-bg-light + wp-block-buttons) preserved fra migrationen.

Yuki-onna kokkekniven fås her:

[Produkt-billede placeholder — i artikler er der her et billede]

Bedste kokkekniv i 2025 - Yuki-onna fra danske USHI.dk

9b · Produkt-rendering på artikelside

Sådan ser produkter ud i review-artikler (alternativ til den fulde ProductBox-komponent ovenover). Produkt-banner (grøn flag-NotchBanner med chevron) + numreret circle injiceret via CSS counter på h2.is-style-cnvs-heading-numbered. Bannere genereres ved build-time fra hver artikels focusKeyword. Numreringen tæller automatisk pr. artikel via .article-body counter-reset.

#1: BEDSTE KOKKEKNIV

USHI – Gyuto kokkekniv

Beskrivelse af USHI-kniven kommer her. Den japanske VG10-stål kerne giver fremragende skarphed og holdbarhed.

#2: BEDSTE KOKKEKNIV

Qookware – Gyuto kokkekniv

Solid all-rounder. God balance mellem pris og kvalitet.

#3: BEDSTE KOKKEKNIV

Endeavour – Big Chopper

For dem der har brug for en større kniv til mere robust arbejde.

9f · AuthorBox (forfatterboks i bund af artikel)

Rund avatar + forfatternavn (heading) + bio-tekst. Vises i bunden af alle artikler over relaterede artikler. Bio og avatar styres i src/data/authors.ts.

9g · RelatedArticles (Du kan måske også lide)

Slidable carousel i bunden af alle artikler. Viser 3 ad gangen på desktop, 2 på tablet, 1 på mobil. Slide via swipe, prev/next eller dot-indikatorer. Henter op til 9 entries fra samme type eller kategori.

10 · SiteFooter

Hvid footer med thin top-rule, tre kolonner, reklamefinansieret-disclosure i bund.

11 · DisclosureStrip (top-bjælke)

Hvid full-width discloser-bjælke der står over headeren. Lang compliant tekst, ingen warning-ikon (per Mikael §4A.12 Q1+Q2). Mobile: tekst wrapper til 2-3 linjer, det er OK.

Gastroworld.dk er læserstøttet. Når du køber produkter via links fra vores side, tjener vi i visse tilfælde en lille provision - det har ingen omkostninger for dig.

12 · SectionDivider

Centeret heading flankeret af to horisontale rules. Forside- og landing-version af §5.6 (artikel-h2'er bruger stadig den venstrejusterede grønne accent-rule).

13 · NumberedArticleList

Cirkulær thumbnail + subtle nummer-cirkel (samme stil som ProductBox-nummer) + green-prefix titel + dato. INGEN kommentar-meta — Mikael §4A.12 Q3 sagde fjern alle spor.

14 · HeroFeature (center-mega)

Fuldbleed-billede med hvid overlay-card pinned bottom-left. Kategori-tag → grøn-prefix titel → byline → pink "Læs artiklen"-pille som visuelt span (hele blokken er klik-target, derfor undgår vi nested anchors).

15 · HeroSideColumn (venstre/højre kolonne)

Vertical ArticleCard øverst + 3 compact kort hairline-separeret nedenunder. Bruges som venstre og højre kolonne i hero-grid.

16 · FeaturedSplit (Test & købsguider-blok)

Stort featured card til venstre + 2-kolonne grid af mindre cards til højre. Default 4 secondaries; vi justerer til 6 hvis live- screenshot kræver det efter visuelt review.