diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-03-22 23:59:14 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-22 23:59:14 +0300 |
| commit | a3ad7327f233cac4bf1c9431bf99e47ab8d5f551 (patch) | |
| tree | db3e9bad4481a49a4cdb5c998fac7ca5e93c4f6d /site/content/docs/5.0 | |
| parent | e775c494f2d54d21204f9449a232ec096f702b77 (diff) | |
Update examples (#33214)
* Add updated Jumbotron example made from utilities
* Update starter template example with new design and links
* Update some existing examples and their screenshots
* Add four new snippet-based examples
* Update layout to improve things a bit
* WIP
* Add d-block to images
* Fix horizontal scroll
* move d-block to the anchor
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/content/docs/5.0')
23 files changed, 1545 insertions, 132 deletions
diff --git a/site/content/docs/5.0/examples/_index.md b/site/content/docs/5.0/examples/_index.md index 4d747cd787..3d5bfab2fb 100644 --- a/site/content/docs/5.0/examples/_index.md +++ b/site/content/docs/5.0/examples/_index.md @@ -19,7 +19,7 @@ aliases: "/examples/" {{- $len := len $entry.examples -}} {{ if (eq $i 0) }}<div class="row">{{ end }} <div class="col-sm-6 col-md-4 col-xl-3 mb-3"> - <a href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> + <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png, /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x" src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html index fc9cfb6f8f..4809dc4bb7 100644 --- a/site/content/docs/5.0/examples/checkout/index.html +++ b/site/content/docs/5.0/examples/checkout/index.html @@ -16,11 +16,11 @@ body_class: "bg-light" <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> </div> - <div class="row g-3"> + <div class="row g-5"> <div class="col-md-5 col-lg-4 order-md-last"> <h4 class="d-flex justify-content-between align-items-center mb-3"> - <span class="text-muted">Your cart</span> - <span class="badge bg-secondary rounded-pill">3</span> + <span class="text-primary">Your cart</span> + <span class="badge bg-primary rounded-pill">3</span> </h4> <ul class="list-group mb-3"> <li class="list-group-item d-flex justify-content-between lh-sm"> diff --git a/site/content/docs/5.0/examples/features/features.css b/site/content/docs/5.0/examples/features/features.css new file mode 100644 index 0000000000..33942f7f13 --- /dev/null +++ b/site/content/docs/5.0/examples/features/features.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.feature-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + font-size: 2rem; + color: #fff; + border-radius: .75rem; +} + +.icon-link { + display: inline-flex; + align-items: center; +} +.icon-link > .bi { + margin-top: .125rem; + margin-left: .125rem; + transition: transform .25s ease-in-out; + fill: currentColor; +} +.icon-link:hover > .bi { + transform: translate(.25rem); +} + +.icon-square { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + border-radius: .75rem; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: 1rem; } + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html new file mode 100644 index 0000000000..de4e00f6d2 --- /dev/null +++ b/site/content/docs/5.0/examples/features/index.html @@ -0,0 +1,285 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> + +<div class="container py-5" id="featured-3"> + <h2 class="pb-2 border-bottom">Columns with icons</h2> + <div class="row g-5 py-5"> + <div class="feature col-md-4"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col-md-4"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col-md-4"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container py-5" id="hanging-icons"> + <h2 class="pb-2 border-bottom">Hanging icons</h2> + <div class="row g-5 py-5"> + <div class="col-md-4 d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col-md-4 d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col-md-4 d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container py-5" id="custom-cards"> + <h2 class="pb-2 border-bottom">Custom cards</h2> + + <div class="row row-cols-3 align-items-stretch py-5"> + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Earth</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>3d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Pakistan</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>4d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>California</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>5d</small> + </li> + </ul> + </div> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container py-5" id="icon-grid"> + <h2 class="pb-2 border-bottom">Icon grid</h2> + + <div class="row row-cols-4 g-4 py-5"> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> +</div> diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg Binary files differnew file mode 100644 index 0000000000..ed2e36a78d --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg Binary files differnew file mode 100644 index 0000000000..b66864a005 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg Binary files differnew file mode 100644 index 0000000000..c411b17ec0 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.0/examples/headers/headers.css b/site/content/docs/5.0/examples/headers/headers.css new file mode 100644 index 0000000000..661a74d55a --- /dev/null +++ b/site/content/docs/5.0/examples/headers/headers.css @@ -0,0 +1,32 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.form-control-dark { + color: #fff; + background-color: var(--bs-dark); + border-color: var(--bs-gray); +} +.form-control-dark:focus { + color: #fff; + background-color: var(--bs-dark); + border-color: #fff; + box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.text-small { + font-size: 85%; +} + +.dropdown-toggle { + outline: 0; +} diff --git a/site/content/docs/5.0/examples/headers/index.html b/site/content/docs/5.0/examples/headers/index.html new file mode 100644 index 0000000000..61a48a5439 --- /dev/null +++ b/site/content/docs/5.0/examples/headers/index.html @@ -0,0 +1,290 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> +</svg> + +<div class="container"> + <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Simple header</span> + </a> + + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> +</div> + +<div class="b-example-divider"></div> + +<div class="container"> + <header class="d-flex justify-content-center py-3"> + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> +</div> + +<div class="b-example-divider"></div> + +<div class="container"> + <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> + <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> + <li><a href="#" class="nav-link px-2 link-dark">About</a></li> + </ul> + + <div class="col-md-3 text-end"> + <button type="button" class="btn btn-outline-primary me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </header> +</div> + +<div class="b-example-divider"></div> + +<header class="p-3 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 text-white">Features</a></li> + <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li> + <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li> + <li><a href="#" class="nav-link px-2 text-white">About</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control form-control-dark" placeholder="Search..."> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-outline-light me-2">Login</button> + <button type="button" class="btn btn-warning">Sign-up</button> + </div> + </div> + </div> +</header> + +<div class="b-example-divider"></div> + +<header class="p-3 mb-3 border-bottom"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control" placeholder="Search..."> + </form> + + <div class="dropdown text-end"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> +</header> + +<div class="b-example-divider"></div> + +<header class="py-3 mb-3 border-bottom"> + <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> + <li><a class="dropdown-item active" href="#">Overview</a></li> + <li><a class="dropdown-item" href="#">Inventory</a></li> + <li><a class="dropdown-item" href="#">Customers</a></li> + <li><a class="dropdown-item" href="#">Products</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Reports</a></li> + <li><a class="dropdown-item" href="#">Analytics</a></li> + </ul> + </div> + + <div class="d-flex align-items-center"> + <form class="w-100 me-3"> + <input type="search" class="form-control" placeholder="Search..."> + </form> + + <div class="flex-shrink-0 dropdown"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> +</header> + +<main class="container-fluid pb-3"> + <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + </div> +</main> + +<div class="b-example-divider"></div> + +<nav class="py-2 bg-light border-bottom"> + <div class="container d-flex flex-wrap"> + <ul class="nav me-auto"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + </ul> + <ul class="nav"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> + </ul> + </div> +</nav> +<header class="py-3 mb-4 border-bottom"> + <div class="container d-flex flex-wrap justify-content-center"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Double header</span> + </a> + <form class="col-12 col-lg-auto mb-3 mb-lg-0"> + <input type="search" class="form-control" placeholder="Search..."> + </form> + </div> +</header> + +<div class="b-example-divider"></div> + +<header class="px-3 py-2 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> + <li> + <a href="#" class="nav-link text-secondary"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + </div> + </div> +</header> + +<div class="px-3 py-2 border-bottom mb-3"> + <div class="container d-flex flex-wrap justify-content-center"> + <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> + <input type="search" class="form-control" placeholder="Search..."> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-light text-dark me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </div> +</div> + +<div class="b-example-divider"></div> diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-docs.png b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png Binary files differnew file mode 100644 index 0000000000..471a9eddfe --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-themes.png b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png Binary files differnew file mode 100644 index 0000000000..13c32337d6 --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png diff --git a/site/content/docs/5.0/examples/heroes/heroes.css b/site/content/docs/5.0/examples/heroes/heroes.css new file mode 100644 index 0000000000..380b70a4a7 --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/heroes.css @@ -0,0 +1,11 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html new file mode 100644 index 0000000000..43138d567c --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/index.html @@ -0,0 +1,123 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +<div class="px-4 py-5 my-5 text-center"> + <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h1 class="display-5 fw-bold">Centered hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="px-4 pt-5 my-5 text-center border-bottom"> + <h1 class="display-4 fw-bold">Centered screenshot</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> + <div class="overflow-hidden" style="max-height: 30vh;"> + <div class="container px-5"> + <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container col-xxl-8 px-4 py-5"> + <div class="row flex-lg-row-reverse align-items-center g-5 py-5"> + <div class="col-10 col-sm-8 col-lg-6"> + <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> + </div> + <div class="col-lg-6"> + <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container col-xl-10 col-xxl-8 px-4 py-5"> + <div class="row align-items-center g-5 py-5"> + <div class="col-lg-7 text-center text-lg-start"> + <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> + <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> + </div> + <div class="col-10 mx-auto col-lg-5"> + <form class="p-5 border rounded-3 bg-light"> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating mb-3"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> + <label> + <input type="checkbox" value="remember-me"> Remember me + </label> + </div> + <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> + <hr class="my-4"> + <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + </form> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="container my-5"> + <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> + <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> + <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg"> + <div class="position-lg-absolute top-0 left-0 overflow-hidden"> + <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720"> + </div> + </div> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="bg-dark text-secondary px-4 py-5 text-center"> + <div class="py-5"> + <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button> + <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button> + </div> + </div> + </div> +</div> + +<div class="b-example-divider mb-0"></div> diff --git a/site/content/docs/5.0/examples/jumbotron/index.html b/site/content/docs/5.0/examples/jumbotron/index.html new file mode 100644 index 0000000000..99cc61dee3 --- /dev/null +++ b/site/content/docs/5.0/examples/jumbotron/index.html @@ -0,0 +1,45 @@ +--- +layout: examples +title: Jumbotron example +include_js: false +--- + +<main> + <div class="container py-4"> + <header class="pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Jumbotron example</span> + </a> + </header> + + <div class="p-5 mb-4 bg-light rounded-3"> + <div class="container-fluid py-5"> + <h1 class="display-5 fw-bold">Custom jumbotron</h1> + <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> + <button class="btn btn-primary btn-lg" type="button">Example button</button> + </div> + </div> + + <div class="row align-items-md-stretch"> + <div class="col-md-6"> + <div class="h-100 p-5 text-white bg-dark rounded-3"> + <h2>Change the background</h2> + <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> + <button class="btn btn-outline-light" type="button">Example button</button> + </div> + </div> + <div class="col-md-6"> + <div class="h-100 p-5 bg-light border rounded-3"> + <h2>Add borders</h2> + <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> + <button class="btn btn-outline-secondary" type="button">Example button</button> + </div> + </div> + </div> + + <footer class="pt-3 mt-4 text-muted border-top"> + © {{< year >}} + </footer> + </div> +</main> diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html index 57d4747ddf..5f09c529fd 100644 --- a/site/content/docs/5.0/examples/pricing/index.html +++ b/site/content/docs/5.0/examples/pricing/index.html @@ -6,76 +6,144 @@ extra_css: include_js: false --- -<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm"> - <p class="h5 my-0 me-md-auto fw-normal">Company name</p> - <nav class="my-2 my-md-0 me-md-3"> - <a class="p-2 text-dark" href="#">Features</a> - <a class="p-2 text-dark" href="#">Enterprise</a> - <a class="p-2 text-dark" href="#">Support</a> - <a class="p-2 text-dark" href="#">Pricing</a> - </nav> - <a class="btn btn-outline-primary" href="#">Sign up</a> -</header> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="check" viewBox="0 0 16 16"> + <title>Check</title> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> +</svg> -<main class="container"> - <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> - <h1 class="display-4">Pricing</h1> - <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> +<div class="container py-3"> + <header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Pricing example</span> + </a> + + <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> + <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> + </nav> + </header> + + <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> + <h1 class="display-4 fw-normal">Pricing</h1> + <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> </div> - <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Free</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>10 users included</li> - <li>2 GB of storage</li> - <li>Email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> - </div> - </div> - </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Pro</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>20 users included</li> - <li>10 GB of storage</li> - <li>Priority email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + <main> + <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Free</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>10 users included</li> + <li>2 GB of storage</li> + <li>Email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> + </div> + </div> </div> - </div> - </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Enterprise</h4> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Pro</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>20 users included</li> + <li>10 GB of storage</li> + <li>Priority email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + </div> + </div> </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>30 users included</li> - <li>15 GB of storage</li> - <li>Phone and email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm border-primary"> + <div class="card-header py-3 text-white bg-primary border-primary"> + <h4 class="my-0 fw-normal">Enterprise</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>30 users included</li> + <li>15 GB of storage</li> + <li>Phone and email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + </div> + </div> </div> </div> + + <h2 class="display-6 text-center mb-4">Compare plans</h2> + + <div class="table-responsive"> + <table class="table text-center"> + <thead> + <tr> + <th style="width: 34%;"></th> + <th style="width: 22%;">Free</th> + <th style="width: 22%;">Pro</th> + <th style="width: 22%;">Enterprise</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" class="text-start">Public</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Private</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + + <tbody> + <tr> + <th scope="row" class="text-start">Permissions</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Sharing</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Unlimited members</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Extra security</th> + <td></td> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + </table> </div> - </div> + </main> <footer class="pt-4 my-md-5 pt-md-5 border-top"> <div class="row"> @@ -86,32 +154,32 @@ include_js: false <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Cool stuff</a></li> - <li><a class="link-secondary" href="#">Random feature</a></li> - <li><a class="link-secondary" href="#">Team feature</a></li> - <li><a class="link-secondary" href="#">Stuff for developers</a></li> - <li><a class="link-secondary" href="#">Another one</a></li> - <li><a class="link-secondary" href="#">Last time</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Resource</a></li> - <li><a class="link-secondary" href="#">Resource name</a></li> - <li><a class="link-secondary" href="#">Another resource</a></li> - <li><a class="link-secondary" href="#">Final resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Team</a></li> - <li><a class="link-secondary" href="#">Locations</a></li> - <li><a class="link-secondary" href="#">Privacy</a></li> - <li><a class="link-secondary" href="#">Terms</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li> </ul> </div> </div> </footer> -</main> +</div> diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css index 70afca134b..c7304d10be 100644 --- a/site/content/docs/5.0/examples/pricing/pricing.css +++ b/site/content/docs/5.0/examples/pricing/pricing.css @@ -1,3 +1,7 @@ +body { + background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); +} + .container { max-width: 960px; } diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html new file mode 100644 index 0000000000..76feca9170 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -0,0 +1,387 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> + +<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex flex-column bg-light" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="visually-hidden">Icon-only</span> + </a> + <ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> + <li class="nav-item"> + <a href="#" class="nav-link active py-3 border-bottom" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#home"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg> + </a> + </li> + </ul> + <div class="dropdown border-top"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> +</div> + +<div class="b-example-divider"></div> + +<div class="p-3 bg-white" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">Collapsible</span> + </a> + <ul class="list-unstyled ps-0"> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true"> + Home + </button> + <div class="collapse show" id="home-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Updates</a></li> + <li><a href="#" class="link-dark rounded">Reports</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> + Dashboard + </button> + <div class="collapse" id="dashboard-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Weekly</a></li> + <li><a href="#" class="link-dark rounded">Monthly</a></li> + <li><a href="#" class="link-dark rounded">Annually</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> + Orders + </button> + <div class="collapse" id="orders-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New</a></li> + <li><a href="#" class="link-dark rounded">Processed</a></li> + <li><a href="#" class="link-dark rounded">Shipped</a></li> + <li><a href="#" class="link-dark rounded">Returned</a></li> + </ul> + </div> + </li> + <li class="border-top my-3"></li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> + Account + </button> + <div class="collapse" id="account-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New...</a></li> + <li><a href="#" class="link-dark rounded">Profile</a></li> + <li><a href="#" class="link-dark rounded">Settings</a></li> + <li><a href="#" class="link-dark rounded">Sign out</a></li> + </ul> + </div> + </li> + </ul> +</div> + +<div class="b-example-divider"></div> + +<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">List group</span> + </a> + <div class="list-group list-group-flush border-bottom scrollarea"> + <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small>Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + </div> +</div> + +<div class="b-example-divider"></div> diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css new file mode 100644 index 0000000000..d034f3af15 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -0,0 +1,82 @@ +body { + display: flex; + flex-wrap: nowrap; + height: 100vh; + height: -webkit-fill-available; + overflow-x: auto; + overflow-y: hidden; +} +body > * { + flex-shrink: 0; + min-height: -webkit-fill-available; +} + +.b-example-divider { + width: 1.5rem; + height: 100%; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + pointer-events: none; + fill: currentColor; +} + +.dropdown-toggle { outline: 0; } + +.nav-flush .nav-link { + border-radius: 0; +} + +.btn-toggle { + display: inline-flex; + align-items: center; + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + background-color: transparent; + border: 0; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(0, 0, 0, .85); + background-color: #d2f4ea; +} + +.btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(0, 0, 0, .85); +} +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + display: inline-flex; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; + text-decoration: none; +} +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: #d2f4ea; +} + +.scrollarea { + overflow-y: auto; +} + +.fw-semibold { font-weight: 600; } +.lh-tight { line-height: 1.25; } diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.js b/site/content/docs/5.0/examples/sidebars/sidebars.js new file mode 100644 index 0000000000..68384c1633 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.js @@ -0,0 +1,8 @@ +/* global bootstrap: false */ +(function () { + 'use strict' + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + tooltipTriggerList.forEach(function (tooltipTriggerEl) { + new bootstrap.Tooltip(tooltipTriggerEl) + }) +})() diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html index 6fefc45e6c..fb885ba414 100644 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ b/site/content/docs/5.0/examples/sign-in/index.html @@ -11,10 +11,16 @@ include_js: false <form> <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <h1 class="h3 mb-3 fw-normal">Please sign in</h1> - <label for="inputEmail" class="visually-hidden">Email address</label> - <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> - <label for="inputPassword" class="visually-hidden">Password</label> - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> + + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me diff --git a/site/content/docs/5.0/examples/sign-in/signin.css b/site/content/docs/5.0/examples/sign-in/signin.css index eaa08ba618..4732d1fb97 100644 --- a/site/content/docs/5.0/examples/sign-in/signin.css +++ b/site/content/docs/5.0/examples/sign-in/signin.css @@ -17,24 +17,21 @@ body { padding: 15px; margin: auto; } + .form-signin .checkbox { font-weight: 400; } -.form-signin .form-control { - position: relative; - box-sizing: border-box; - height: auto; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { + +.form-signin .form-floating:focus-within { z-index: 2; } + .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index 0cd64c75f6..7dca385232 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -5,46 +5,45 @@ extra_css: - "starter-template.css" --- -<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> - <div class="container-fluid"> - <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> +<div class="col-lg-8 mx-auto p-3 py-md-5"> + <header class="d-flex align-items-center pb-3 mb-5 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Starter template</span> + </a> + </header> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item"> - <a class="nav-link active" aria-current="page" href="#">Home</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> - </ul> - </li> - </ul> - <form class="d-flex"> - <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success" type="submit">Search</button> - </form> - </div> + <h1>Get started with Bootstrap</h1> + <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> + + <div class="mb-5"> + <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a> </div> -</nav> -<main class="container"> + <hr class="col-3 col-md-2 mb-5"> + + <div class="row g-5"> + <div class="col-md-6"> + <h2>Starter projects</h2> + <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <ul class="icon-list"> + <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> + <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li> + </ul> + </div> - <div class="starter-template text-center py-5 px-3"> - <h1>Bootstrap starter template</h1> - <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> + <div class="col-md-6"> + <h2>Guides</h2> + <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> + <ul class="icon-list"> + <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> + <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> + <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> + </ul> + </div> </div> -</main><!-- /.container --> + <footer class="pt-5 my-5 text-muted border-top"> + Created by the Bootstrap team · © {{< year >}} + </footer> +</div> diff --git a/site/content/docs/5.0/examples/starter-template/starter-template.css b/site/content/docs/5.0/examples/starter-template/starter-template.css index 6fb7091051..d03436db03 100644 --- a/site/content/docs/5.0/examples/starter-template/starter-template.css +++ b/site/content/docs/5.0/examples/starter-template/starter-template.css @@ -1,3 +1,18 @@ -body { - padding-top: 5rem; +.icon-list { + padding-left: 0; + list-style: none; +} +.icon-list li { + display: flex; + align-items: flex-start; + margin-bottom: .25rem; +} +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; } |
