Link card

Card with summarizing info that links to the page with the full content.

Status: experimental
Version: 0.0.1

Anatomy

  • Card container
  • Heading
  • Link
  • Figure (optional). Not just an image, since sometimes an attribution text or caption is included. Sometimes a video preview is displayed.
  • Body (optional)

State

The card should have the same states as a link:

  • link: when the link has been initialized. Similar to a:link. Without this state, the card is not clickable.
  • hover
  • focus
  • visited
  • active

API

Class names

nih-link-card
nih-link-card--active
nih-link-card--visited
nih-link-card--hover
nih-link-card--focus
nih-link-card__heading
nih-link-card__body
nih-link-card__figure
nih-link-card__link

Custom element attributes

link boolean attribute
open boolean attribute
visited boolean attribute

The native :visited state of a link should not be accessible, for privacy reasons. Therefore, the visited state would require a custom implementation that might be provided by single page apps that remember what pages have already been read.

The style implementation for the visited state should be careful to consider this situation: nih-link-card[visited] might not be applied while nih-link-card a:visited is applied. This can lead to an inconsistent and unintended design.

Accessibility

  • Descriptive link text: The link description should clearly describe what page it links to. The text "Read more..." or something similar is not helpful, especially not to screen readers who Tab through links.

    Consider using the a elements title attribute or define aria-describedby to point to the heading of the card.

  • Sussinct link text: The link text should not be too extensive, either. When the entire card is wrapped in an <a> element, the link text is too long and decreases usability for screen reader users.

Technology

  • Compatible with native behavior: clicking the card should offer the same functionality as clicking the link. At least as much as possible:
    • Respect target="_blank" attribute.
    • Respect rel="noreferrer" attribute.
    • Open in new tab, when using Control-click or Command-click
    • Bookmark the link using context menu.
    • Preview the link using iOS long press.

  • Progressive enhancement: when the JavaScript implementaiton is not initialized, the component should look okay and not look like a link and make the impression the item is clickable. This also means no hover state, and the card should not be focusable.

  • Contained interactive elements remain usable: the card contains secondary links (for example: category tags that link to an overview of pages in that category) these should remain usable, and the link card should be able to make a distinction between the primary link and secondary links.

Experiment

Card contains a link

You'll Never Believed What Happened To Baby Jane!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Read more...

Using custom element

The card should behave like a link.

CSS code to make the card look like a link 
nih-link-card[link] {
  border-bottom: 2px solid var(--nih-link-color, blue);
}
nih-link-card[link]:hover,
nih-link-card[link]:focus {
  color: var(--nih-link-hover-color, blue);
  border-bottom: 2px solid var(--nih-link-hover-color, blue);
}
nih-link-card[active],
nih-link-card[active]:hover {
  color: var(--nih-link-active-color, red);
  border-bottom: 2px solid var(--nih-link-active-color, red);
}

You'll Never Believed What Happened To Baby Jane!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Read more...

Using custom element without link

Without a clickable link, the card should not behave like a clickable link.

# You'll Never Believed What Happened To Baby Jane!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.