Elementet med klassen "canvas.svelte-o3oskp" är inställt att visas som ett block.
En anpassad teckensnittsfamilj med namnet "Guardian Headline Full" definieras med olika vikter och stilar:
- Light (300) i normal och kursiv
- Regular (400) i normal och kursiv
- Medium (500) i normal och kursiv
- Semibold (600) i normal och kursiv
Varje teckensnittsstil finns tillgänglig i WOFF2-, WOFF- och TrueType-format från Guardians asset-servrar. Guardian-webbplatsen använder specifika teckensnitt för sina rubriker och titlar. Dessa inkluderar Guardian Headline Full i fet, fet kursiv, black och black kursiv stil, samt Guardian Titlepiece i fet stil. Varje teckensnitt finns i flera filformat som woff2, woff och truetype för kompatibilitet.
För karusellsektionen visas titeln i vit text med Guardian Text Sans Web-teckensnittet, med en storlek på 17px och medium vikt. Den är positionerad absolut och innehåller en länk formaterad i ljusgrönt med fet vikt och ingen understrykning.
Karusellen i sig är en horisontellt rullande container som fångar element på plats när du rullar, med mjuk scrollning som standard om inte användaren föredrar reducerad rörelse. Den döljer scrollbars och har ett mellanrum på 10px mellan element.
Varje kort i karusellen är 310px brett och 160px högt, med en vit bakgrund och en bild till höger som skalas för att passa. Bildbehållaren är 120px gånger 150px med en grå bakgrund, och bilder zoomar in något vid hovring om inte reducerad rörelse föredras. Kort inkluderar padding och visas som flex-containrar, med innehållet justerat längst ner.
I karusellkomponenten har kortets bildbehållare ingen övergångseffekt. Innehållsbehållaren inom varje kort är uppsatt som ett flexibelt kolumnlayout. Rubriker och stycken inuti innehållsbehållaren är formaterade med en mörkgrå färg och ingen textdekoration. Rubriker använder en specifik serif-teckensnittsstack, har en teckenstorlek på 24px, 115% radhöjd, normal vikt och en transparent nedre kantlinje. Stycken använder en sans-serif-teckensnittsstack med en teckenstorlek på 14px och 115% radhöjd, där det första stycket är i fetstil.
När ett kort är valt skalas dess bild upp med 20%. Inaktiverade kort visar en "Kommer snart"-överlagring i fet text över en semitransparent vit bakgrund, placerad längst upp till vänster.
Kontrollsektionen är en flexibel rad med space-between-justering och inkluderar sidnumrerings-text i vitt, med ett 12px sans-serif-teckensnitt. Kontrollknappar är cirkulära, 40px i diameter, med en grå kantlinje och transparent bakgrund, innehållande 24px-ikoner. Den första knappens ikon är horisontellt spegelvänd.
Teckensnittsdefinitioner för Guardian Headline Full definieras med light, light kursiv, regular och regular kursiv varianter, hämtade från woff2-, woff- och ttf-filer. Guardian Headline Full-teckensnittsfamiljen inkluderar olika stilar och vikter, var och en definierad med specifika källfiler i WOFF2-, WOFF- och TrueType-format. Här är detaljerna:
- Regular Italic: vikt 400, kursiv stil
- Medium: vikt 500, normal stil
- Medium Italic: vikt 500, kursiv stil
- Semibold: vikt 600, normal stil
- Semibold Italic: vikt 600, kursiv stil
- Bold: vikt 700, normal stil
- Bold Italic: vikt 700, kursiv stil
- Black: vikt 900, normal stil
- Black Italic: vikt 900, kursiv stil
Alla teckensnittsfiler finns på angivna URL:er från Guardians assets-domän.
