aboutsummaryrefslogtreecommitdiff
path: root/docs/components.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2012-02-12 14:47:09 -0800
committerMark Otto <[email protected]>2012-02-12 14:47:09 -0800
commit1b32e982ade1fc5275a851b711b45f6a0ed21b0c (patch)
tree75cf78b3ab5118ed214fcad38db7a528905c1352 /docs/components.html
parent0ff88f2db3b9fa4604886494a711d74652a2fb4f (diff)
downloadbootstrap-1b32e982ade1fc5275a851b711b45f6a0ed21b0c.tar.xz
bootstrap-1b32e982ade1fc5275a851b711b45f6a0ed21b0c.zip
add hero-unit docs per #1880
Diffstat (limited to 'docs/components.html')
-rw-r--r--docs/components.html37
1 files changed, 37 insertions, 0 deletions
diff --git a/docs/components.html b/docs/components.html
index 37f1a6511..10725024b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
+ <li><a href="#hero">Hero</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
@@ -1137,6 +1138,42 @@
+<!-- Hero unit
+================================================== -->
+<section id="hero">
+ <div class="page-header">
+ <h1>Hero unit <small>Jumbotron for your site's tagline</small></h1>
+ </div>
+ <div class="row">
+ <div class="span4">
+ <h2>About</h2>
+ <p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
+ <h3>Markup</h3>
+ <p>Wrap your content in a <code>div</code> like so:</p>
+<pre class="prettyprint linenums">
+&lt;div class="hero-unit"&gt;
+ &lt;h1&gt;Heading&lt;/h1&gt;
+ &lt;p&gt;Tagline&lt;/p&gt;
+ &lt;p&gt;
+ &lt;a class="btn btn-primary btn-large"&gt;
+ Learn more
+ &lt;/a&gt;
+ &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+ </div>
+ <div class="span8">
+ <div class="hero-unit">
+ <h1>Hello, world!</h1>
+ <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+ <p><a class="btn btn-primary btn-large">Learn more</a></p>
+ </div>
+ </div>
+ </div>
+</section>
+
+
+
<!-- Thumbnails
================================================== -->
<section id="thumbnails">