colors
Main Colors
#D8232A
#000000
#FFFFFF
Sub Colors
#E6E6E6
#CCCCCC
#999999
#666666
#666666
Assort Colors
#9E3853
#ED5C7E
#F187A8
#F7C1DO
#3E4D77
#6178B3
#899FCC
#B8C7E2
#00739B
#00A8E2
#52BDEA
#ACD7F1
#A47427
#FAAF4C
#FDC36C
#FEDAAE
#9F4817
#F06F2F
#F79E62
#FBC7A6
#1A7A3D
#36B25D
#6CBF7D
#B5DBB9
#6B892A
#A7CD45
#BAD67B
#DCE9BA
#007875
#00B1AC
#5EC4BD
#B1DEDB
grid
.col-md-12
.col-md-10
.col-md-2
.col-md-8
.col-md-4
.col-md-6
.col-md-6
.col-md-5
.col-md-7
.col-md-4
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-5
.col-md-4
.col-md-3
.col-md-3
.col-md-2
.col-md-2
.col-md-2
typography
"Praxis Bold", Arial, sans-serif;
"Praxis Regular", Arial, sans-serif;
Base Styles
accordion 1
BSA IT recently launched an improved Self Help Hub for teammates who are looking for a quick answer to IT questions. Improvements to the site make it easier for teammates to find information about standard desktop tools and resources through out the company. This relaunch will help you navigate the site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Copy Source
<div class=" col-md-5 accordion1">
<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">
<img class="news-thumbnail" src="../bsa.sharepoint/img/news-default.png"/>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
BSA IT launches revamped Self Help Hub for all branches!
</a>
</h4>
</div>
<div id="collapseOne" ng-model="checked" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne ngshow">
<div class="panel-body">
BSA IT recently launched an improved Self Help Hub for teammates who are looking for a quick answer to IT questions. Improvements to the site make it easier for teammates to find information about standard desktop tools and resources through out the company. This relaunch will help you navigate the site.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<img class="news-thumbnail"src="../bsa.sharepoint/img/news-default.png"/>
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Five teammates recognized as “Leaders to Watch in the Tire Industry"
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<img class="news-thumbnail" src="../bsa.sharepoint/img/news-default.png"/>
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Bridgestone announces new internal initiative that will “Change the Game”
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</div>accordion 2
Technology Standard
BSA IT recently launched an improved Self Help Hub for teammates who are looking for a quick answer to IT questions. Improvements to the site make it easier for teammates to find information about standard desktop tools and resources through out the company. This relaunch will help you navigate the site.
Computer Standards
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Laptop Standards
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Copy Source
<div class=" col-md-5 accordion2">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
Technology Standard
</h4>
</div>
</a>
<div id="collapseFour" ng-model="checked" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour ngshow">
<div class="panel-body">
BSA IT recently launched an improved Self Help Hub for teammates who are looking for a quick answer to IT questions. Improvements to the site make it easier for teammates to find information about standard desktop tools and resources through out the company. This relaunch will help you navigate the site.
</div>
</div>
</div>
<div class="panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
Computer Standards
</h4>
</div>
</a>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
</div>
</div>
</div>
<div class="panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
Laptop Standards
</h4>
</div>
</a>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
</div>
</div>
</div>
</div>
</div>blurb
Blurb Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Blurb Title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Blurb Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Copy Source
<div class=" col-md-7 blurb">
<div class="col-md-4">
<div class="blurb-story">
<img class="blurb-img" src="../bsa.sharepoint/img/news-default.png">
<h3>Blurb Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4">
<div class="blurb-story">
<img class="blurb-img" src="../bsa.sharepoint/img/news-default.png">
<h3>Blurb Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-md-4">
<div class="blurb-story">
<img class="blurb-img" src="../bsa.sharepoint/img/news-default.png">
<h3>Blurb Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>Copy Source
<div>
<button type="button" class="btn sg-btn btn-primary">This is a Submit Button</button>
<button type="button" class="btn btn-default">This is a Close Button</button>
</div>headings
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
Copy Source
<h1>h1. Heading 1</h1>
<br>
<h2>h2. Heading 2</h2>
<br>
<h3>h3. Heading 3</h3>
<br>
<h4>h4. Heading 4</h4>
links
Copy Source
<h3 class="link-title">Link with hover</h3>
<a class="link" href="">View all</a>
<br><br>
<h3>List link with hover</h3>
<ul class="list-ul">
<li><a href="">Lorem ipsum dolor sit amet</a></li>
</ul>
lists
Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Copy Source
<h3>Unordered</h3>
<ul class="list-ul">
<li><a href="">Lorem ipsum dolor sit amet</a></li>
<li><a href="">Consectetur adipiscing elit</a></li>
<li><a href="">Integer molestie lorem at massa</a></li>
<li><a href="">Facilisis in pretium nisl aliquet</a></li>
<li><a href="">Nulla volutpat aliquam velit</a></li>
</ul>
<br><br>
<h3>Ordered</h3>
<ol class="list-ol">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ol>
<br><br>
<h3>Inline</h3>
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
modal
Copy Source
<a href="#styleguide-modal" data-toggle="modal" data-target="#styleguide-modal">Click to see Modal</a>
<div class="modal fade feedback-modal" id="styleguide-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Modal Title</h2>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Pattern Styles
alerts
Failure Message!
Success Message!
Copy Source
<div class="save-alert alert alert-danger">
Failure Message!
</div>
<div class="save-alert alert alert-success">
Success Message!
</div>
Copy Source
<ol class="breadcrumb custom-breadcromb">
<li>
<a href="#">Departments</a>
</li>
<li>
<a href="#" class="selected">IT Services</a>
</li>
</ol>tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Copy Source
<div class="tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam.</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>