Update hero and layout a smidge

twbs · Jul 23, 2020 · ed3185a · ed3185a
1 parent cfed08d
commit ed3185a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
@@ -59,7 +59,7 @@
   border-bottom: 1px solid rgba(0, 0, 0, .05);
 
   .f3 {
-    max-width: 760px;
+    max-width: 680px;
   }
 
   hr {

diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
@@ -61,6 +61,22 @@ <h2>Copy HTML</h2>
       {{ $source := readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) -}}
       {{ highlight $source "html" "" }}
 
+      <h2>Examples</h2>
+      <p>
+        <a href="#" title="Placeholder link title" class="text-decoration-none">
+          Example link text
+          {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
+        </a>
+      </p>
+      <p>
+        <button type="button" class="btn btn-outline-primary">
+          Example button
+          {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
+        </button>
+        <button type="button" class="btn btn-outline-primary">
+          {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
+        </button>
+      </p>
     </main>
 
     {{- partial "footer" . }}

diff --git a/docs/layouts/partials/hero.html b/docs/layouts/partials/hero.html
@@ -1,14 +1,14 @@
 <div class="hero py-5">
   <div class="container">
     <h1 class="f0">Bootstrap Icons</h1>
-    <p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p>
+    <p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation—and now available for any project.</p>
 
     <div class="row text-muted">
       <div class="col-sm">
-        <p>Bootstrap Icons are designed to work with <a href="{{ .Site.Params.main }}/">Bootstrap</a> components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for Bootstrap, they'll work in any project.</p>
+        <p>Bootstrap Icons are designed to work with <a href="{{ .Site.Params.main }}/">Bootstrap</a> components, from form controls to navigation. But, they'll work in just about any project, too. That's because Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.</p>
       </div>
       <div class="col-sm">
-        <p>They're open sourced (MIT), so you're free to download, use, and extend. Heads up though, <strong>they're in alpha right now</strong> and subject to sweeping changes.</p>
+        <p>They're open sourced (MIT), so you're free to download, use, and extend any icon. Every SVG can be copied from right here, or you can use the <a href="#sprite">SVG sprite</a> or <a href="#icon-fonts">icon fonts</a>.</p>
       </div>
       <div class="col-md-3 col-lg-4">
         <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>