Badevaerelsepriser.dk Design and Style Guide Post
Dette er den samlede oversigt over alle komponenter og typografiske elementer i vores designsystem, vist i et “Article” layout.
Typografi og Basis Elementer
Nedenfor ser du hvordan overskrifter (H2 og H3), afsnit, punktopstillinger, og citater håndteres af layoutet.
I dette afsnit bruger vi generel formatering for at demonstrere linjeafstand og farver. At renovere badeværelse er et spændende projekt, og nedenfor finder du nyttig rådgivning.
- Første punkt i en uordnet liste
- Andet punkt om pris og budget
- Tredje punkt med eksternt link
Dette er en blockquote / et pull quote, perfekt til at fremhæve ekspert-udtalelser og citater fra tilfredse kunder.
1. LeadParagraph Komponent
Dette er en LeadParagraph. Den er tiltænkt som en stærk indledning, der fanger brugerens opmærksomhed lige efter en overskrift eller hero-sektion. Bruges typisk i starten af en artikel.
2. AsideImage Komponent
Tekst ved siden af billede
Når du bruger AsideImage, vil teksten automatisk flyde pænt ved siden af billedet på desktop. Dette er ideelt til at bryde lange tekststykker op med visuelle eksempler, uden at billedet tager for meget fokus fra læsningen.
På mobile enheder vil billedet automatisk blive placeret over teksten for at sikre den bedste læseoplevelse på små skærme.
Spejlvendt layout
Ved at sætte reverse={true}, kan du placere billedet til venstre og teksten til højre. Dette giver en god visuel variation i artiklen, hvis du har flere af disse moduler efter hinanden.
Bemærk hvordan teksten flugter præcis med toppen af billedet takket være vores specialtilpassede CSS-justeringer.
3. NoteBox Komponent
4. FigureWithCaption Komponent
Standard badeværelse i tekstbredde (standard-figure):
Med fullBleed aktiveret for at bryde ud af brødteksten og tage hele artiklens bredde (900px):
5. CtaBox Komponent
Dette er en CTA box som nu er centreret som standard og understøtter logo.
6. AffiliateCtaBox Komponent
En dedikeret Affiliate boks med trust bullets og plads til billede.
7. CtaBanner Komponent
En fuld-bredde CTA banner.
8. Gallery Komponent
Visuel portefølje via to eller flere billeder vist responsivt i et grid.
Kommentarer