diff options
Diffstat (limited to 'docs/layouts/partials/home.html')
| -rw-r--r-- | docs/layouts/partials/home.html | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/docs/layouts/partials/home.html b/docs/layouts/partials/home.html new file mode 100644 index 000000000..c2df1aca9 --- /dev/null +++ b/docs/layouts/partials/home.html @@ -0,0 +1,114 @@ +<div id="icons"> + <div class="hero py-5"> + <div class="container"> + <h1 class="f0">Bootstrap Icons</h1> + <p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p> + + <div class="row text-muted"> + <div class="col"> + <p>Bootstrap Icons are designed first and foremost to work with <a href="{{ .Site.Params.main }}">Bootstrap</a> components, from form controls to navigation and more. Bootstrap Icons are SVGs, so they scale quickly and easily to any size and can be styled with CSS.</p> + </div> + <div class="col"> + <p>Plus, while they're built for Bootstrap first, they're great for any project. They're open sourced (MIT), so you're free to download, use, and extend.</p> + </div> + <div class="col-md-3 col-lg-4"> + <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script> + </div> + </div> + + <hr class="my-4"> + + <p class="text-muted"> + Current version: <strong>v{{ .Site.Params.package_version }}</strong> <small class="py-1 px-2 font-weight-bold text-white bg-primary rounded">Alpha</small> + <span class="px-2">•</span> + <a href="{{ .Site.Params.package_repo }}">GitHub repo</a> + </p> + </div> + </div> + + <nav class="bd-subnavbar pt-2 pb-3 pb-md-2"> + <div class="container d-flex align-items-md-center py-2"> + <label for="search" class="sr-only">Search for icons</label> + <input class="form-control search mr-2" id="search" placeholder="Start typing to filter..." autofocus> + <button class="btn btn-bd-primary sort text-nowrap" data-sort="icon-name"> + Search + </button> + </div> + </nav> + + <div class="container my-5"> + {{ partial "icons-list" . }} + </div> +</div> + +<div class="container"> + <h2 id="usage">Usage</h2> + + <button class="btn btn-primary mb-4" type="button"> + {{ readFile "icons/house-fill.svg" | safeHTML }} + Back home + </button> + + <div class="btn-group mb-4"> + <button class="btn btn-primary active" type="button"> + {{ readFile "icons/house-fill.svg" | safeHTML }} + <span class="sr-only">Back home</span> + </button> + <button class="btn btn-primary" type="button"> + {{ readFile "icons/gear.svg" | safeHTML }} + <span class="sr-only">Settings</span> + </button> + <button class="btn btn-primary" type="button"> + {{ readFile "icons/star-outline.svg" | safeHTML }} + <span class="sr-only">Starred</span> + </button> + </div> + + <div class="list-group mb-4 mx-auto"> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Item with switch</div> + <div class="form-check form-switch ml-auto" style="font-size: 1.25rem;"> + <input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch1" checked> + <label class="sr-only" for="playgroundSwitch1">Switch label</label> + </div> + </div> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Another with switch</div> + <div class="form-check form-switch ml-auto" style="font-size: 1.25rem;"> + <input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch2"> + <label class="sr-only" for="playgroundSwitch2">Another switch label</label> + </div> + </div> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Choose an option</div> + <div class="d-flex align-items-center ml-auto"> + <span class="text-muted">Selected</span> + {{ readFile "icons/chevron-right.svg" | safeHTML }} + </div> + </div> + </div> + + <div class="list-group mb-4 mx-auto"> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Item with switch</div> + <div class="form-check form-switch ml-auto" style="font-size: 1.25rem;"> + <input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch3" checked> + <label class="sr-only" for="playgroundSwitch3">Switch label</label> + </div> + </div> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Another with switch</div> + <div class="form-check form-switch ml-auto" style="font-size: 1.25rem;"> + <input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch4"> + <label class="sr-only" for="playgroundSwitch4">Another switch label</label> + </div> + </div> + <div class="list-group-item d-flex align-items-center"> + <div class="mb-0">Choose an option</div> + <div class="d-flex align-items-center ml-auto"> + <span class="text-muted">Selected</span> + {{ readFile "icons/chevron-right.svg" | safeHTML }} + </div> + </div> + </div> +</div> |