Template: homepage

[Robbert]

Componenten

Hero (RHC)

• Hero component in homepage template zetten
• headingLevel toevoegen: default heading in RHC Hero is <h3>, een <h1> lijkt me hier logischer?
  • checken: of moet de logo tekst <h1> zijn? In dat geval Hero geen <h1>
• checken: is styling/opbouw component van RHC Hero ook passend voor Dev Ovh?
  → of moeten title + subtitle in het midden staan
  → moet de img pagina breed zijn? (zag dat dit in de details template wel gedaan was bij de Hero, nog niet gevonden hoe)
• indien nodig: styling aanpassen
• kloppen de design tokens?
• Help Wanted starten
• Help Wanted stappen afmaken (Hero component (Help Wanted) #15 )

SubTitle (of SubHeading?)

• SubHeading in homepage template zetten
  → subheading optie in RHC Hero gebruikt
• checken: Help Wanted starten?
  → nee, is altijd onderdeel van HeadingGroup

HeadingGroup (RHC)

• RHC HeadingGroup in homepage template zetten

Heading (RHC)

• RHC Heading in homepage template zetten
• checken: heading order huidige homepage Dev Ovh
  → deze was niet helemaal op logische volgorde: aangepast in template

Section

• <section> gebruikt (is hier een component voor?/moet hier een component voor komen? 🤔)

Icon (RHC)

• Icon in homepage template zetten

Card (as Link) RHC

• Card as Link in template zetten
  → RHC Card gebruikt, deze werkt als Card as Link
• checken: moet de RHC Card opbouw aangepast worden?
• fixen: verdeling van cards is nu niet mooi met de uitlijning van andere componenten
• checken: is background color mogelijk ipv image?
• onderzoeken: underline link in card verdwijnt on hover en underline heading verschijnt (why?)

• Card as Link heeft NLDS: todo status - Help Wanted is al gestart, deze stappen verder oppakken (Card as Link component (Help Wanted) #17 ). Zie ook Card as Link Github discussion)

Data Badge (RHC)

• Data Badge in homepage template zetten
• de NL Design System Candidate versie van Data Badge gebruiken (+ RH styling)

Badge List

• Badge List om Data Badge in homepage template zetten
  → na feedback heb ik deze om enkele én meerdere geplaatst, i.v.m. styling

Page Content (RHC)

• Page Content in homepage template zetten
• checken: classnames/styling

Page Body (RHC)

• Page Body in homepage template zetten

Link (RHC)

• Link in homepage template zetten
• doorgeven: op de huidige dev.ovh verwijst de laatste link (templates) naar de een na laatste link (tools)
  → in de homepage template verwezen naar home

Back to Top Link

• Back to Top Link in homepage template zetten
• Back to Top Link Help Wanted starten
• Back to Top Link stappen afmaken (Back to Top Link component (Help Wanted) #16 )

Overig (misschien nodig?)

• Action Group (om Link that looks like button?)
• Link that looks like a button (incl. Icon)

---

Deze heb ik er voor nu ingezet voor de de look/feel van een website maar deze moeten apart gemaakt worden (zie issue #7) en dan in deze template aangepast worden?

• PageHeader (RHC)
• NavBar (RHC)
• Footer (RHC - waarom is deze trouwens Footer genoemd en niet PageFooter?)

---

Accessibility & Responsiveness

• fixen: content valt nu op 400% zoom buiten beeld
• checken: de pagebody/main etc componenten + classnames/styling (dit heb ik overgenomen van andere templates maar hier klopt van alles nog niet)

Voor Hero & Card had ik wat CSS om te testen maar die kan ik niet pushen 🤷‍♀ dus heb ik hier even ingezet, mocht het bruikbaar zijn.

.rhc-hero-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-items: center;
  gap: var(--rhc-space-300);
}

.rhc-hero-cards-container {
  column-gap: var(--rhc-space-300);
  display: flex;
  flex-wrap: nowrap;
  margin-block-end: var(--rhc-space-400);
  margin-block-start: var(--rhc-space-300);
  @media (width <= 780px) {
    flex-direction: column;
  }
}

.rhc-templates-cards-container {
  column-gap: var(--rhc-space-300);
  display: flex;
  flex-wrap: nowrap;
  margin-block-end: var(--rhc-space-400);
  margin-block-start: var(--rhc-space-300);
  row-gap: var(--rhc-space-300);
  @media (width <= 780px) {
    flex-direction: column;
  }
}

---

Screenshots huidige developer.overheid website

100%

400%