Novus Technologies Novus Technologies design kit v0.9.0
Menu
Overview

General

ButtonBadgePillsAvatarBrand lockup

Layout

ContainerGrid & RowSurface & text utilitiesApp shellPage header

Data Display

CardTableChartsCalendarStatsBulletsLeadersLogo wallCollapse & DisclosureTimelineValue chainDescriptions

Feedback

AlertProgressModalSlide-overSkeletonEmpty state

Forms

Field & InputDropdownLead form & CTA rowDate pickerFilter bar

Navigation

NavSide navigationTop navigationApp switcherUser menuStepperTabsBreadcrumbPagination

Templates

Sign-in pageSigned-out pageSettings layout

Theming

Browser tabProduct themes

Data Display

Calendar

Month view composed from the table component; the highlighted day is the single accent.

composes .table · accent day via .badge--accent

August 2026
MonTueWedThuFriSatSun
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456
Month view (composed from the table component)
<div style="max-width:32rem">
  <div class="row" style="justify-content:space-between;margin-bottom:var(--space-2)">
    <b>August 2026</b>
    <span class="row" style="gap:var(--space-2)">
      <button class="btn btn--ghost btn--sm" aria-label="Previous month">‹</button>
      <button class="btn btn--ghost btn--sm" aria-label="Next month">›</button>
    </span>
  </div>
  <table class="table" style="text-align:center">
    <thead><tr><th style="text-align:center">Mon</th><th style="text-align:center">Tue</th><th style="text-align:center">Wed</th><th style="text-align:center">Thu</th><th style="text-align:center">Fri</th><th style="text-align:center">Sat</th><th style="text-align:center">Sun</th></tr></thead>
    <tbody>
      <tr><td class="muted">27</td><td class="muted">28</td><td class="muted">29</td><td class="muted">30</td><td class="muted">31</td><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
      <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr>
      <tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td></tr>
      <tr><td>24</td><td>25</td><td>26</td><td><span class="badge badge--accent">27</span></td><td>28</td><td>29</td><td>30</td></tr>
      <tr><td>31</td><td class="muted">1</td><td class="muted">2</td><td class="muted">3</td><td class="muted">4</td><td class="muted">5</td><td class="muted">6</td></tr>
    </tbody>
  </table>
</div>

Usage

  • The calendar is a presentation pattern composed from the shipped .table: week rows, muted days from adjacent months, the highlighted day as an accent badge.
  • Use it to display schedules and availability; for date entry, use the Date picker (the native control) instead.
  • One accent per view: the highlighted day is the only accent-colored element in the grid.
  • Month navigation is a pair of ghost buttons on the header row; wire them to your data layer.
‹ Charts Stats ›