Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link in the top-left corner.</p>
  <a class="midwest-skip-link" href="#preview-main">Skip to main content</a>
  <nav class="flex gap-3">
    <a href="#" class="underline">Home</a>
    <a href="#" class="underline">Products</a>
    <a href="#" class="underline">About</a>
  </nav>
  <main id="preview-main" tabindex="-1" class="rounded-2xl border border-gray-1 p-6">
    <h2 class="font-medium">Main content</h2>
    <p class="text-gray-3">The skip link jumps focus here, past the navigation.</p>
  </main>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link in the top-left corner.</p>
  <%= midwest_skip_link(href: "#preview-main") %>
  <nav class="flex gap-3">
    <a href="#" class="underline">Home</a>
    <a href="#" class="underline">Products</a>
    <a href="#" class="underline">About</a>
  </nav>
  <main id="preview-main" tabindex="-1" class="rounded-2xl border border-gray-1 p-6">
    <h2 class="font-medium">Main content</h2>
    <p class="text-gray-3">The skip link jumps focus here, past the navigation.</p>
  </main>
</div>

Default

Press Tab with focus in the preview: the skip link appears in the top-left. Activating it jumps focus past the navigation to the main content landmark. It is visually hidden the rest of the time.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Skip Link/default

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."