Rm Ui Styling

Buttons

<button class="button">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button hollow">Outlined</button>
<button class="button tiny/small/large">Sizes</button>

Forms

<form>
  <label
    >Input Label
    <input type="text" placeholder="Placeholder" />
  </label>
  <label
    >Textarea
    <textarea placeholder="Placeholder"></textarea>
  </label>
  <fieldset class="fieldset">
    <legend>Checkbox Group</legend>
    <input type="checkbox" id="chk1" /><label for="chk1">Option 1</label>
  </fieldset>
</form>

Visibility

<!-- Show on specific breakpoints -->
<div class="show-for-medium">Visible on medium+</div>
<div class="hide-for-large">Hidden on large</div>

<!-- Screen reader only -->
<div class="show-for-sr">Accessible only</div>

Accessibility (WCAG 2.1 AA)

Semantic HTML

Use proper HTML5 elements:

<header>
  <nav>
    <main>
      <section>
        <article>
          <footer></footer>
        </article>
      </section>
    </main>
  </nav>
</header>

ARIA Attributes

Use for interactive Blazor components:

Focus Management

// Blazor: Set focus after render
await ElementRef.FocusAsync();

// Keyboard navigation: tabindex="0" for custom focusable elements

Color Contrast

• Normal text: 4.5:1 ratio
• Large text (18pt+): 3:1 ratio
• UI components: 3:1 ratio

Screen Reader Testing

Test with:

• NVDA (Windows)
• VoiceOver (macOS)
• Firefox preferred

Skip Navigation

<a class="show-for-sr" href="#main-content">Skip to main content</a>
<main id="main-content"></main>