Skip to content

feat: add NcCard component - #9144

Open
remko48 wants to merge 4 commits into
mainfrom
feat/9126/nc-card
Open

remko48 wants to merge 4 commits into
mainfrom
feat/9126/nc-card

Conversation

@remko48

@remko48 remko48 commented Oct 30, 2026

Copy link
Copy Markdown

☑️ Resolves

Note:

  • This is the generic container only. The stats and other data-driven modes of our own CnCard are left out.

🖼️ Screenshots

00-page-01

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

Styleguidist caches a stylesheet by component name, and the Markdown table and the props table are both called TableRenderer. Whichever rendered first in a session styled both, so after a page with a table in its documentation every props, events and slots table lost its padding, borders and column widths. The Markdown table now renders under its own name with the same styles.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
Renders a bordered card with a heading, an optional icon, actions at the end of the heading row, a description, content and a footer, for overviews that show items side by side. The heading is an h3 by default and its level can be set from 2 to 6. With href or to the heading becomes a link that covers the whole card, while the actions, content and footer stay clickable on their own; active highlights the card.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
…ve card

The content and the footer were lifted above the link that covers the card, so a click on their empty space did nothing. Now only the controls in them are lifted, so the rest follows the link. The link of an active card gets aria-current, and in forced colors the active card gets a thicker border in the system highlight color, as the color and shadow that mark it are replaced there. The clickable area has the rounded corners of the card, and a new target prop opens the link in another tab, with the rel NcButton uses.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
The link always got an aria-current key, without a value when the card was not active, which also removed the aria-current="page" RouterLink sets on a link to the current route. The attribute is now only passed for an active card.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Remko <remko@conduction.nl>
@remko48 remko48 added the enhancement New feature or request label Oct 30, 2026
@remko48
remko48 requested a review from a team as a code owner October 30, 2026 13:08
@remko48 remko48 added 3. to review Waiting for reviews component Component discussion and/or suggestion labels Oct 30, 2026
@codecov

codecov Bot commented Oct 30, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.37%. Comparing base (44c25ae) to head (d87c103).
⚠️ Report is 16 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9144      +/-   ##
==========================================
+ Coverage   59.11%   59.37%   +0.25%     
==========================================
  Files         125      126       +1     
  Lines        4520     4546      +26     
  Branches     1347     1362      +15     
==========================================
+ Hits         2672     2699      +27     
+ Misses       1570     1569       -1     
  Partials      278      278              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@skjnldsv

skjnldsv commented Oct 31, 2026 •

Copy link
Copy Markdown
Contributor
image

alignment could probably be improved

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews component Component discussion and/or suggestion enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants