Hero CSS component.
npm install @dictu/heroDe hero component toont een opvallende sectie met een achtergrondafbeelding en
tekstinhoud aan de bovenkant van een pagina.
Je kunt de CSS zo in je project installeren:
``console`
npm install --save-dev @dictu/hero
Je kunt de CSS uit node_modules/ importeren:
`html`
Als je CSS imports gebruikt vanuit JavaScript:
`javascript`
import "@dictu/hero/dist/index.css";
- Gebruik altijd de .dictu-hero class voor de hero sectie.
- Gebruik semantische HTML: voor de hoofdcontainer.lang
- Voeg een attribuut toe om de taal aan te geven.
- Gebruik logische heading niveaus voor de structuur.
- Zorg ervoor dat de achtergrondafbeelding een alt-tekst heeft voor
toegankelijkheid.
- De hero is responsive en past zich automatisch aan op mobiele apparaten.
`html`
src="/path/to/hero-image.jpg"
alt="Beschrijving van de afbeelding"
class="dictu-hero__image dictu-hero__image-ratio-video dictu-hero__image--corner-top-right"
loading="lazy"
/>
- .dictu-hero — hoofdcontainer voor de hero sectie.dictu-hero__container
- — interne container voor de inhoud
- .dictu-hero__image — de achtergrondafbeelding van de hero.dictu-hero__image-ratio-square
- — vierkante beeldverhouding (1:1).dictu-hero__image-ratio-landscape
- — landschap beeldverhouding (4:3).dictu-hero__image-ratio-video
- — video beeldverhouding (16:9)
- .dictu-hero__image--corner-top-left — afgeronde hoek linksboven.dictu-hero__image--corner-top-right
- — afgeronde hoek rechtsboven.dictu-hero__image--corner-bottom-left
- — afgeronde hoek linksonder.dictu-hero__image--corner-bottom-right
- — afgeronde hoek rechtsonder
- .dictu-hero__message — container voor de tekstinhoud.dictu-hero__message--left
- — positioneert het bericht links.dictu-hero__message--right
- — positioneert het bericht rechts.dictu-hero__heading
- — de hoofdtitel van de hero.dictu-hero__subheading
- — de ondertitel van de hero
De component gebruikt design tokens voor kleuren, spacing, typografie, etc.
Voorbeeld:
De hero component is volledig responsive:
- Desktop: Volledige grootte met optimale tekst- en afbeeldingsverhoudingen
- Mobiel (≤ 48em):
- Kleinere marges voor betere ruimtebenutting
- Aangepaste tekstgroottes voor leesbaarheid
- Compactere lay-out van het berichtgedeelte
- Gebruik altijd een element voor de hero container.lang` attribuut toe voor de juiste taal.
- Voeg een
- Zorg voor voldoende kleurcontrast tussen tekst en achtergrond.
- Gebruik logische heading hiërarchie (meestal h1 voor de hoofdtitel).
- Voeg betekenisvolle alt-teksten toe aan afbeeldingen.
- Test de component met een schermlezer om te controleren of de content goed
voorgelezen wordt.
- Links: Bericht verschijnt aan de linkerkant van de afbeelding
- Rechts: Bericht verschijnt aan de rechterkant van de afbeelding
- Linksboven: Afgeronde hoek linksboven
- Rechtsboven: Afgeronde hoek rechtsboven
- Linksonder: Afgeronde hoek linksonder
- Rechtsonder: Afgeronde hoek rechtsonder
- Vierkant (1:1): Voor vierkante afbeeldingen
- Landschap (4:3): Voor traditionele landschapsafbeeldingen
- Video (16:9): Voor widescreen afbeeldingen