docs: fix Cards — title before description, correct padding, equal-height grid - #23
Merged
Conversation
…nd rows Nextra 3's Cards.Card renders `children` BEFORE the title span — its children slot is designed to hold a preview image, not text. Our docs pass a description as children, so every "Read next" grid rendered description-above-title, with the description flush to the card edge (only Nextra's title span carries p-4) and a 3-up auto-fill grid that stranded a lone card on a second row. Replace Nextra's Cards with components/Cards.tsx: title first, then a padded body, one padding box on the card, and a 2-col stretch grid so rows stay flush and equal-height. Visual style is unchanged (mirrors FeatureCards). Only import lines changed in the MDX; no prose was touched.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
@Sigilix ignore
@coderabbitai ignore
Root cause: Nextra 3's
Cards.Cardrenderschildrenbefore the title span by design — that slot is intended for a preview image, not text. Our docs pass a description as children, so it landed above the title. Only the title span carried Nextra's_p-4, so the description sat flush to the card edge while the title was inset. The grid's--rows:3auto-fill also wrapped a 4-card row as 3 + 1.Fix: a source-level
components/Cards.tsxthat renders title → padded body, styled to match the existing.sig-feature-cardexactly (same border, gradient, radius, hover), with an equal-height 2-col grid (1-col ≤640px). Fixed at the DOM level rather than with a CSSordertrick, which would have left the description first for screen readers and SEO.