Minimal Cards, Decorative Icons, and Deleting Metadata
Unverified metadata is gone; what remains is name, sector, description, plus three technical details that keep cards accessible.
TL;DR
The author stripped unverified metadata from company cards, keeping only name, sector, and description to protect content integrity. CSS pseudo-elements create dividers without DOM bloat, while aria-hidden icons and motion-reduce utilities keep the component accessible. Explicit array slicing handles grid rows predictably, avoiding awkward orphaned cards.
I was staring at the company card grid on the about page of a project. Every extra line of metadata on the screen is actually a claim someone has to defend as true. I used to think about filling in the founding year and estimated location just to make the layout look complete and professional to users. But that just piles up editorial debt. If the data cannot be verified, it is better to not have it at all. Using fake or estimated data will only destroy trust when someone checks the details, and eventually we are the ones who have to fix the inaccurate data reports.
So I decided to cut it down to the bone. The cards now only display three things I can actually defend: name, sector, and description. This reduction is not a loss of features, but a protection of content integrity. Behind this cleaner look, a few small technical details work quietly to keep the component accessible, lightweight, and easy to maintain.
Visual Dividers Without DOM Bloat
To separate the cards, I did not add empty div elements or new hr tags in the HTML markup. Instead, I used CSS pseudo-elements. The ::before property creates a pseudo-element as the first child of the selected element, which is perfect for adding cosmetic content via the content property without changing the semantic structure [9].
In the globals.css file, the .reference-divider::before class handles this elegantly. I set the @media (min-width: 640px) media query so the divider appears as a 1px thin vertical line between cards, utilizing the available horizontal space. Conversely, at @media (max-width: 639px), the divider changes to a horizontal line separating the cards vertically. The layout stays neat on both small and large screens without polluting the DOM structure with divider tags that have no meaning for search engines or screen readers. It is a small node saving, but it matters a lot when the page renders in large quantities.
Decorative Icons and Polite Motion
Every card has a Building2 icon imported directly from lucide-react. Since this icon only serves as a visual decoration repeating the meaning of the sector text next to it, it must be hidden from assistive technologies. The Lucide package already includes the aria-hidden="true" attribute by default, and this is exactly what we need for decorative icons so screen readers stay focused on text with actual meaning [7].
This small detail ensures that users relying on screen readers will not hear a confusing double description. They will not hear "Building icon, technology sector", but just "Technology sector", which is much more efficient and less fatiguing. Screen readers already have enough cognitive load to process, and repeating visual cues as text is a classic anti-pattern that clutters the audio output.
There is also an interaction detail developers often ignore. I added a hover:-translate-y-1 effect so the card feels a bit alive and responsive when the cursor hovers over it. But animations like scaling or shifting position can trigger physical discomfort for users with vestibular disorders. Therefore, I strictly limited this effect. I observed it through the motion-reduce:transform-none utility: for users who enable reduce motion, the transform is zeroed out. The prefers-reduced-motion media query is designed to detect this preference, and large scale or shift animations are known to trigger discomfort for users with vestibular issues [6]. The lift animation becomes an optional feature that respects the user operating system settings.
Measured and Predictable Grids
On the implementation side in frontend/src/app/[locale]/about/page.tsx, the card arrangement is made very explicit. I used the array slice(0,3) method to render the first row, and slice(3) for the second row. The grids are different too: lg:grid-cols-3 on top, lg:grid-cols-4 at the bottom. By explicitly slicing the array, I avoid relying on CSS auto-flow to guess the break points, which often leads to orphaned cards on the last row. The slice(0,3) guarantees exactly three items in the first block, matching the lg:grid-cols-3 declaration perfectly. The remaining items fall into the second block, which uses lg:grid-cols-4 to accommodate growth without leaving awkward gaps.
State transitions are also managed via the built-in theme-transition utility, ensuring visual changes happen smoothly without sudden jolts that could break the reader focus.
Deleting code sometimes feels weird for those of us used to being rewarded for adding features, not removing them. But in this case, dropping unverified metadata and relying on built-in accessibility details is the most tangible form of software maintenance. Good code is not just about what it can do, but also about what it intentionally chooses not to do.