City of Lexington
[Draft] Pattern library for lexingtonky.gov
It is based on the Bootstrap 3.3.5 front-end framework. If you need extra components, please use the markup and classes in the Bootstrap documentation.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>Nullam quis risus eget urna mollis ornare...</p>

Lead text

Use lead text when you want a paragraph or sentence to stand out.

<p class="lead">Use lead text when...</p>

Link, strong and emphasis

This is just regular text without anything fancy.
This is a sample link
Strong text is what this is
This text is being emphasized

<p>This is just regular text without anything fancy.
<a href="#" target="_blank">This is a sample link</a>
<strong>strong text is what this is</strong>
<em>this text is being emphasized</em><br/></p>

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ul>
<li>...</li>
</ul>

<ol>
<li>...</li>
</ol>

Table

  • Use.table for basic table styling.
  • Use.table-striped to add zebra-striping to any table row.
  • Use .table-bordered to add borders on all sides of the table and cells.
  • Use .table-condensed to make tables more compact.

You can add a combination of any of these classes to a table. In the example the classes .table, .table-striped and .table-condensed are being used.

Table Caption
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
<table class="table table-condensed table-striped">...</table>

Alerts

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Wells

  • Use .well-sm for a smaller well.
  • Use .well-lg for a larger well.
Look, I'm in a well!
<div class="well">...</div>

Tabs

This is the content for the first Home tab.

This is the content for the second Profile tab.

<ul class="nav nav-tabs" role="tablist">
   <li role="presentation" class="active">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">Home</a>
   </li>
   <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">Profile</a>
   </li>
</ul>

<div class="tab-content">
   <div role="tabpanel" class="tab-pane active" id="home">...</div>
   <div role="tabpanel" class="tab-pane" id="profile">...</div>
</div>

Accordions

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
         <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-                  parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a></h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
         <div class="panel-body"> ... </div>
      </div>
   </div>
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
         <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a></h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
         <div class="panel-body"> ... </div>
      </div>
   </div>
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
         <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
         <div class="panel-body"> ... </div>
      </div>
   </div>
</div>