x
1
2
3
4
5
6
7
8
9
<div class="flex flex-col gap-4"> <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link.</p> <a class="midwest-skip-link" href="#main"> Skip to main content </a> <main id="main" tabindex="-1" class="rounded-2xl border border-gray-1 p-6"> <p class="text-gray-3">Landmark target</p> </main></div>1
2
3
4
5
6
7
8
9
10
11
<div class="flex flex-col gap-4"> <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link.</p> <%= midwest_skip_link(href: href) do %> <%= label %> <% end %> <main id="main" tabindex="-1" class="rounded-2xl border border-gray-1 p-6"> <p class="text-gray-3">Landmark target</p> </main></div>Playground
| Param | Description | Input |
|---|---|---|
|
Target landmark id (e.g. #main) |
|
|
|
Link text |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Skip Link/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."