0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/layouts/partials/home/icons.html
Mark Otto 538f50be5a
Home imports (#37318)
* Update docs homepage to use separate partials for each section

Also modifies the homepage code snippets under getting started to remove the code comments, making copy-pasting easier.

* Update some copy and examples

* newlines

* type button

* more code review, bring back interactive components

* fix hover
2022-10-22 16:51:44 -04:00

24 lines
1.5 KiB
HTML

<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
<div class="col-lg-6">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
<p class="lead fw-normal">
<a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
</p>
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
<a href="{{ .Site.Params.icons }}" class="icon-link fw-semibold">
Get Bootstrap Icons
<svg class="bi"><use xlink:href="#arrow-right-short"></use></svg>
</a>
</p>
</div>
<div class="col-lg-6">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
</div>
</section>