Skip to content

Commit

Permalink
Feat(web): Update demo for footer component
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavelklibani
pavelklibani committed Sep 27, 2024
1 parent fa31bd4 commit c9d35e3
Showing 1 changed file with 92 additions and 4 deletions.
96 changes: 92 additions & 4 deletions packages/web/src/scss/components/Footer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h2 class="docs-Heading">Basic Usage</h2>

<!-- Grid with navigation links -->
<div
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-6"
style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
>

Expand Down Expand Up @@ -97,6 +97,45 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
</ul>
</nav>

<!-- Navigation links 5 -->
<nav aria-labelledby="footer-navigation-section-5">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-5">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
</ul>
</nav>

<!-- Navigation links 6 -->
<nav aria-labelledby="footer-navigation-section-5">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-6">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
</ul>
</nav>

</div>

<!-- Divider -->
Expand Down Expand Up @@ -271,7 +310,7 @@ <h2 class="docs-Heading">Nested Link Blocks, Logo Only</h2>

<!-- Grid with navigation links -->
<div
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-6"
style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
>

Expand Down Expand Up @@ -379,11 +418,11 @@ <h3 class="typography-body-large-text-bold mb-600">
</li>
</ul>
</nav>
<nav aria-labelledby="footer-nested-links-navigation-section-5">
<nav aria-labelledby="footer-nested-links-navigation-section-1">
<h3 class="typography-body-large-text-bold mb-600">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-5"
id="footer-nested-links-navigation-section-1"
>
Section headline
</a>
Expand All @@ -398,6 +437,55 @@ <h3 class="typography-body-large-text-bold mb-600">
</ul>
</nav>
</div>

<!-- Navigation links 5 -->
<nav aria-labelledby="footer-nested-links-navigation-section-5">
<h3 class="typography-body-large-text-bold mb-600">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-5"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
</ul>
</nav>

<!-- Navigation links 6 -->
<nav aria-labelledby="footer-nested-links-navigation-section-6">
<h3 class="typography-body-large-text-bold mb-600">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-6"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
<li>
<a href="https://www.example.com">Link</a>
</li>
</ul>
</nav>
</div>

<!-- Divider -->
Expand Down

0 comments on commit c9d35e3

Please sign in to comment.