This looks good overall. The html and css are well structured, I just have a few recommendations. You should be pleased with this though!
- Give the body min-height 100svh maybe instead of vh. This is a new unit and worth knowing about even if you choose not to use it this time.
- There is no benefit to making this component a flex column. The only reason I can see to do that is if you were using the gap property to create vertical space between child elements but even that is unnecessary. All this does is add extra css lines for no reason.
- Make sure the component max width is in rem not px. That way, users who have a larger default text size won't see their large text squished into a narrow component — the whole layout will scale nicely.
- When we build single component demos like this try to think about the context of how it would be used in a real site. This card would never provide the page title (main heading) so it should not have a h1. Choose a heading level of a lower importance like h2.
Marked as helpful
0
