Sitemap
v0.0.0
The Sitemap component shows a list of all pages of the website.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--hgap-30">
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
tumblr
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
vice retro YOLO chartreuse
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
lomo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mixtape +1 tilde
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tattooed pabst try-hard health
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
cronut scenester gastropub migas
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
migas etsy
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
pickled hoodie everyday
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chillwave taxidermy health swag
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
tilde schlitz VHS DIY
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
forage
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
yr phlogiston
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
austin sustainable chicharrones church-key
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chillwave flannel
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
fingerstache schlitz bespoke
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
truffaut mlkshk lomo chia
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
farm-to-table selfies kitsch
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
cray gluten-free truffaut
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
phlogiston meggings
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
chia letterpress
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
aesthetic Yuccie vinyl gluten-free
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
goth hella
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
bitters
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
selvage
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
Yuccie sriracha cleanse
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
williamsburg cronut tousled
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
austin echo
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
listicle typewriter
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
pickled
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
stumptown
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
post-ironic synth forage retro
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
ennui beard austin
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
vegan
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
freegan vinyl quinoa
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
skateboard mustache meggings Thundercats
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
cornhole
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
normcore skateboard
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
disrupt knausgaard Yuccie PBR&B
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
lumbersexual letterpress
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
williamsburg keffiyeh distillery
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--locked" href="#">
ramps viral drinking
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
hella
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tilde slow-carb tacos banjo
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
roof fingerstache 90's
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
scenester
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
health twee meggings
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
etsy
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
master
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
90's mumblecore
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut Godard flannel
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
shoreditch stumptown
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
scenester
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
polaroid authentic marfa
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
park
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
bitters cliche park
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
scenester humblebrag pop-up
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
PBR&B quinoa chicharrones aesthetic
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tilde shoreditch umami humblebrag
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
pickled waistcoat
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
whatever shoreditch
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
chambray whatever normcore
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
actually wayfarers
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
occupy
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
cred twee
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chillwave
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
salvia
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
chartreuse vinegar bitters
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
kombucha DIY williamsburg
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
+1
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
paleo kickstarter gastropub cleanse
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
tumblr
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
wolf health kombucha pinterest
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
truffaut
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
blog authentic
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
austin hashtag
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
dreamcatcher selfies
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
wolf organic synth
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
slow-carb mlkshk
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
XOXO normcore vinegar cronut
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
twee shoreditch cred
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<!-- Sitemap -->
<div class="vi-sitemap">
<a class="vi-sitemap__link vi-sitemap__link--title vi-sitemap__link--arrow" href="#">
sartorial waistcoat
</a>
<ul class="vi-sitemap__list">
<!-- / Sitemap list items -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
forage
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
retro
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
mustache
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
meditation ugh humblebrag
</a>
</li>
<!-- / Sitemap list item with collection -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
drinking
</a>
<a class="vi-sitemap__collection" href="#">
86 articles
</a>
</li>
<!-- / sitemap list items with several sublists -->
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
DIY
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
VHS offal vinegar umami
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
park street
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
aesthetic
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
bespoke Yuccie mixtape cold-pressed
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
keytar
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
lomo
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
locavore iPhone bespoke
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
echo
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
vinyl YOLO
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--arrow" href="#">
etsy kinfolk
</a>
</li>
</ul>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
literally gastropub brunch
</a>
<a class="vi-sitemap__collection" href="#">
21 articles
</a>
<ul class="vi-sitemap__list vi-sitemap__list--sub">
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
selfies
</a>
</li>
<li class="vi-sitemap__list-item">
<a class="vi-sitemap__link vi-sitemap__link--locked" href="#">
skateboard
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>Stylesheets #
The following stylesheet is required to display this component.
The following additional stylesheets are used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Added
- 23 Nov 2023 - Add locked icon variant
- 28 June 2022 - Initial draft
Changed
- 07 Nov 2023 - Header are links now.