UI Generator

Select theme appearance

Clickable Card

Clickable cards are a common way to display article links or products. They are oftentimes used wrongly, so this should guide you well.

Link to section titled: Component

Component

Here we go again

After seeing to many inaccessible cards, it was time to warm the topic up again.

-Joshua

Clickable Card

- html 
<!-- COMPONENT-START: nc-clickable-card -->
<article
    class="nc-clickable-card nc-stack"
    style="max-inline-size: 16rem; border: 1px solid var(--color-border-base); padding: var(--spacing-base)"
>
    <img src="/preview.jpg" alt="">
    <h2>
        <a href="#" data-link="main">Here we go again</a>
    </h2>
    <p>After seeing to many inaccessible cards, it was time to warm the topic up again.</p>
    <div class="nc-cluster nc-hint">
        <time>Today</time><span>-</span><span>Joshua</span>
    </div>
</article>
<!-- COMPONENT-END: nc-clickable-card -->
/* Minimum CSS for Clickable Card */
@import "@nordcode/ui/colors";
@import "@nordcode/ui/utils/theme";
@import "@nordcode/ui/components/cards"
Link to section titled: Usage notes

Usage notes

  • By wrapping only the actual link text in an anchor tag, we ensure screen readers can easily announce the link.
  • We also make sure, not to duplicate a link target, because that confuses screen reader users.
Link to section titled: Examples

Examples

With Read more and extra link

Sometimes you want a "Read more" button and a link to an author

Here we go again

After seeing to many inaccessible cards, it was time to warm the topic up again.

-Joshua

With Read more and extra link

- html 
<!-- COMPONENT-START: nc-clickable-card -->
<article
    class="nc-clickable-card nc-stack"
    style="max-inline-size: 16rem; border: 1px solid var(--color-border-base); padding: var(--spacing-base)"
>
    <img src="/preview.jpg" alt="">
    <h2>
        <a href="#" data-link="main">Here we go again</a>
    </h2>
    <p>After seeing to many inaccessible cards, it was time to warm the topic up again.</p>
    <div class="nc-cluster nc-hint">
        <time>Today</time><span>-</span><span><a href="#extra" data-link="extra">Joshua</a></span>
    </div>
    <span data-read-more class="nc-button" aria-hidden="true">Read more</span>
</article>
<!-- COMPONENT-END: nc-clickable-card -->