Novus Technologies Novus Technologies design kit v0.2.0
Menu
Overview

General

ButtonBadgeAvatarBrand lockup

Layout

ContainerGrid & RowSurface & text utilitiesApp shell

Data Display

CardTableStatsBulletsLeadersLogo wallCollapse & DisclosureValue chain

Feedback

AlertModal

Forms

Field & InputLead form & CTA row

Navigation

Nav

Theming

Product themes

Data Display

Card

Bordered surface; interactive cards lift on hover and take a stretched-link trigger.

.card · .card--raised · .card--interactive · .card-trigger

Why Novus

Info tiles are static, no hover response.

Static card
<div class="card" style="max-width:320px">
  <h3>Why Novus</h3>
  <p class="muted" style="margin:0">Info tiles are static, no hover response.</p>
</div>

novapay

Digital payments, switching, issuing, acquiring, QR/NFC.

Interactive card (whole card clickable)
<div class="card card--interactive" style="position:relative;max-width:320px">
  <h3>novapay</h3>
  <p class="muted" style="margin:0">Digital payments, switching, issuing, acquiring, QR/NFC.</p>
  <button class="card-trigger" aria-label="Open novapay details"></button>
</div>

novastore

Digital retailing for the last mile.

Photo-top product card
<div class="card card--interactive" style="position:relative;max-width:320px;padding:0;overflow:hidden">
  <img src="../photos/novastore.jpg" alt="" style="width:100%;height:var(--space-9);object-fit:cover;display:block">
  <div style="padding:var(--space-4)">
    <h3 style="margin-bottom:var(--space-1)">novastore</h3>
    <p class="muted" style="margin:0">Digital retailing for the last mile.</p>
  </div>
  <button class="card-trigger" aria-label="Open novastore details"></button>
</div>

Usage

  • There is exactly one hover treatment and it always means "clickable": lift + raised shadow + accent border via .card--interactive.
  • A static box that reacts to hover is a false affordance, never add hover to info tiles or logo walls.
  • .card-trigger is a real button stretched over the card: keyboard focus and one accessible target. The card needs position:relative.
  • Cards rest on a subtle shadow and rise on hover only if clickable.
Table ›