Content Components v1.5 vs 2.0

Content:

Lead:

Component Name	SCORE v1.5	SCORE v2.0
Lead	<p class="lead score-component score-content score-lead (Lead Style)"> ... </p>	<p class="score-lead (custom class)"> ... </p>

Content Spot:

Component Name	SCORE v1.5	SCORE v2.0
Content Spot	<div class="score-component score-content score-content-spot (Content Spot Style)"> ... </div>	<div class="score-content-spot (custom class)"> ... </div>

Image:

Component Name	SCORE v1.5	SCORE v2.0
Image - Responsive	<img src="..." class="score-image img-responsive score-component score-content (Image Style)" alt="" />	<img src="..." class="score-image img-responsive (custom class)" alt="#"/>

Component Name	SCORE v1.5	SCORE v2.0
Image - Non-responsive	<img src="..." class="score-image score-component score-content (Image Style)" alt="" />	<img src="..." class="score-image (custom class)" alt="#"/>

Youtube Video:

Component Name

SCORE v1.5

SCORE v2.0

Youtube Video

<div class="score-youtube-video embed-responsive score-component score-content score-video (Video Style)">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="score-youtube-video (custom class)">
  <iframe src="..." class="embed-responsive-item"></iframe>
</div>

Features:

Component Name

SCORE v1.5

SCORE v2.0

Highlight

<div class="thumbnail score-component score-content score-image score-highlight (Highlight Style)">
    <div class="score-highlight-header">
        <!-- highlight header -->
    </div>
    <img src="..." alt="" />
    <div class="caption">
        <h2>Title</h2>
        <div class="score-highlight-body">
            <!-- body text -->
        </div>
        <div class="score-call-to-action">
            <!-- call to action -->
        </div>
    </div>
</div>

<div class="score-highlight (custom class)">
  <div class="score-highlight-header">
    ...
  </div>
  <img src="..." alt="#">
  <div class="caption">
    <h2>...</h2>
    <div class="score-highlight-body">
      ...
    </div>
    <div class="score-call-to-action">
      ...
    </div>
  </div>
</div>

Collections:

Component Name	SCORE v1.5	SCORE v2.0
Accordion	<div class="panel-group score-component score-content score-accordion" id=""> ... </div>	<div class="panel-group score-accordion (custom class)" id=""> ... </div>
Accordion Panel	<div class="panel score-component score-content score-panel score-accordion-panel (Panel Style)"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="" href=""> ... </a> </h4> </div> <div id="" class="panel-collapse collapse"> <div class="panel-body"> ... </div> </div> </div>	<div class="panel score-accordion-panel (custom class)"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="" href=""> ... </a> </h4> </div> <div id="" class="panel-collapse collapse"> <div class="panel-body"> ... </div> </div> </div>
Carousel - Carousel Pane	<div class="carousel-inner"> <!--start carousel pane component--> <div class="item score-component score-background score-carousel-pane (Carousel Pane Style) (Background Style) active" style="color:#FFFFFF; background:Grey url('...')"> <div class="score-carousel-pane-body"> ... </div> </div> <!--end carousel pane component--> </div>	<div class="carousel-inner"> <div class="item score-carousel-pane (custom class) (background class) active" style="..."> <div class="score-carousel-pane-body"> ... </div> </div> </div>
List Group - List Group Item	<ul class="score-component score-content score-list-group"> <!--start list group item component--> <li class="list-group-item score-component score-list-group-item (List Group Item Style)"> <h4 class="list-group-item-heading">...</h4> </li> <!--end list group item component--> </ul>	<li class="score-list-group-item (custom class)"> <h4 class="list-group-item-heading"> ... </h4> </li>
Tabset - Tab Panel	<div id="pane1" class="tab-pane fade score-component score-content score-panel score-tab-panel active in" data-title="Panel Title"> ... </div>	<div id="pane1" class="score-tab-panel tab-pane fade in (custom class) active"> ... </div>
Progress Area	<div class="progress score-component score-content score-progress-area"> ... </div>	(No Longer Supporting)
Progress Bar	<div class="score-component score-progress-bar progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: %"> <span class="sr-only">% Complete</span> </div>	(No Longer Supporting)

Buttons:

Component Name	SCORE v1.5	SCORE v2.0
Button	<a href="/" class="score-component score-button btn btn-default (Button Style)">...</a>	<a href="#" class="score-button (custom class)">...</a>
Button Toolbar	<div class="btn-toolbar score-component score-button-toolbar" role="toolbar"> ... </div>	<div class="score-button-toolbar (custom class)" role="toolbar"> ... </div>
Button Group	<div class="btn-group score-component score-button-group"> ... </div>	<div class="score-button-group (custom class)"> ... </div>
Button Menu	<div class="btn-group score-component score-button score-button-menu"> <button type="button" class="dropdown-toggle" data-toggle="dropdown"> Text <span class="caret"></span> <span class="sr-only">Toggle</span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>	<div class="score-button-menu (custom class)"> <button type="button" class="score-button" data-toggle="dropdown"> ... <span class="caret"></span> <span class="sr-only">Toggle</span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>
Image Button - Responsive	<a href="..." class="score-component score-content score-image score-image-button (Image Style)"> <img src="..." class="img-responsive" alt="..."> </a>	<a href="#" class="score-image-button (custom class)"> <img src="..." class="img-responsive" alt="#"/> </a>
Image Button - Non-responsive	<a href="..." class="score-component score-content score-image score-image-button (Image Style)"> <img src="..." alt="..."> </a>	<a href="#" class="score-image-button (custom class)"> <img src="..." alt="#"/> </a>
Split Button Menu	<div class="score-split-button-menu btn-group score-component score-button score-button-menu score-navbar"> <a href="/" class="btn btn-default">Link</a> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>	<div class="score-split-button-menu (custom class)"> <a href="#" class="score-button">...</a> <button type="button" class="score-button" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> ...button menu item... </ul> </div>
Button Menu Item	<ul class="dropdown-menu"> <!--start button menu items--> <li class="score-component score-button score-button-menu-item"><a href="/Home">Button Menu Link</a></li> <li class="score-menu-list-divider divider score-component"> <span class="sr-only">divider</span> </li> <li class="score-component score-button score-button-menu-item"><a href="/Home">Button Menu Link</a></li> <!--end button menu items--> </ul>	<li class="score-button-menu-item (custom class)"><a href="#">...</a></li> <li class="score-menu-list-divider divider"> <span class="sr-only">divider</span> </li> <li class="score-button-menu-item (custom class)"><a href="#">...</a></li>

Document Headers:

Component Name	SCORE v1.5	SCORE v2.0
Document Header	<div class="page-header score-component score-content score-image score-document-header (Header Style)"> <div class="score-header-image"> <img src="..." class="(Image Style)" alt="" /> </div> <h1>Hero title line 1 <br />Hero title line 2 </h1> <h2>Hero subtitle</h2> </div>	<div class="score-document-header (custom class)"> <div class="score-header-image"> <img src="..." class="(image style)" alt="#"/> </div> <h1>... <br />...</h1> <h2>...</h2> </div>
Document Header with Subtitle	<div class="page-header score-document-header-with-subtitle score-component score-content score-image score-document-header (Header Style)"> <div class="score-header-image"> <img src="..." class="(Image Style)" alt="" /> </div> <h1>Hero title line 1 <small>Hero title line 2</small> </h1> <h2>Hero subtitle</h2> </div>	<div class="score-document-header-with-subtitle (custom class)"> <div class="score-header-image"> <img src="..." class="(image style)" alt="#"/> </div> <h1>... <small>...</small> </h1> <h2>...</h2> </div>
Full Width Hero	<div class="jumbotron score-component score-content score-image score-hero score-full-width-hero (Hero Style)" style="color:#000000;background-color:#eee;"> <div class="container"> <div class="score-hero-image"> <img src="..." class="(Image Style)" alt="" /> </div> <h1>Hero title line 1 <br />Hero title line 2 </h1> <h2>Hero subtitle</h2> <div class="score-hero-body"> <!--Hero body--> </div> <div class="score-call-to-action"> <!--Call to action--> </div> </div> </div>	<div class="score-full-width-hero (custom class) (background class)" style="..."> <div class="container"> <div class="score-hero-image"> <img src="..." class="(image style)" alt="#" /> </div> <h1>... <br />...</h1> <h2>...</h2> <div class="score-hero-body"> ... </div> <div class="score-call-to-action"> ... </div> </div> </div>
Hero	<div class="jumbotron score-component score-content score-image score-hero (Hero Style)" style="color:#000000;background-color:red;"> <div class="score-hero-image"> <img src="..." class="(Image Style)" alt=""> </div> <h1>Hero title line 1 <br>Hero title line 2</h1> <h2>Hero subtitle</h2> <div class="score-hero-body"> <!--Hero body--> </div> <div class="score-call-to-action"> <!--Call to action--> </div> </div>	<div class="score-hero (custom class) (background class)" style="..."> <div class="score-hero-image"> <img src="..." class="(image style)" alt="#" /> </div> <h1>... <br>...</h1> <h2>...</h2> <div class="score-hero-body"> ... </div> <div class="score-call-to-action"> ... </div> </div>

Section Headers:

Component Name

SCORE v1.5

SCORE v2.0

Section Header

<div class="score-component score-content score-image score-section-header (Header Style)">
    <div class="score-header-image">
        <img src="..." class="(Image Style)" alt="" />
    </div>
    <h2>Hero title line 1
        <br />Hero title line 2   </h2>
    <h3>Hero subtitle</h3>
</div>

 <div class="score-section-header (custom class)">
  <div class="score-header-image">
    <img src="..." class="(image style)" alt="#" />
  </div>
  <h2>...
    <br />...</h2>
  <h3>...</h3>
</div>

Section Hero

<div class="jumbotron score-section-hero score-component score-content score-image score-hero (Hero Style)" style="color:#000000;background-color:white;">
    <div class="score-hero-image">
        <img src="..." class="(Image Style)" alt="" />
    </div>
    <h2>Hero title line 1
        <br />Hero title line 2   </h2>
    <h3>Hero subtitle</h3>
    <div class="score-hero-body">
        <!--hero body-->
    </div>
    <div class="score-call-to-action">
        <!--call to action-->
    </div>
</div>

 <div class="score-section-hero (custom class) (background class)" style="...">
  <div class="score-hero-image">
    <img src="..." class="(image style)" alt="#" />
  </div>
  <h2>...
    <br />...</h2>
  <h3>...</h3>
  <div class="score-hero-body">
    ...
  </div>
  <div class="score-call-to-action">
    ...
  </div>
</div>

Panels:

Component Name	SCORE v1.5	SCORE v2.0
Style Box	<div class="score-component score-background score-style-box (Background Class) (Style Box Class)" style="background:red"> ... </div>	<div class="score-style-box (custom class) (background class)" style="..."> ... </div>
Alert - Dismissible	<div class="alert score-component score-content score-alert alert-dismissible (Alert Style)"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ... </div>	<div class="score-alert (custom class)"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ... </div>
Alert - Not Dismissible	<div class="alert score-component score-content score-alert (Alert Style)"> ... </div>	<div class="score-alert (custom class)"> ... </div>
Information Panel	<div class="panel score-component score-content score-panel (Panel Style)"> <div class="panel-heading"> <h3 class="panel-title"> Panel title </h3> </div> <div class="panel-body"> <!--panel body--> </div> <div class="panel-footer"> <!--panel footer--> </div> </div>	<div class="score-panel (custom class)"> <div class="panel-heading"> <h3 class="panel-title"> ... </h3> </div> <div class="panel-body"> ... </div> <div class="panel-footer"> ... </div> </div>
Well	<div class="well score-component score-content score-well (Well Style)" style="background-color:green;color:#000000;"> ... </div>	<div class="score-well (custom class) (background class)" style="..."> ... </div>
Center Text	<div class="text-center score-component score-center-text"> ... </div>	<div class="score-center-text (custom class)"> ... </div>
Right Text	<div class="text-right score-component score-right-text"> ... </div>	<div class="score-right-text (custom class)"> ... </div>
Left Text	<div class="text-left score-component score-left-text"> ... </div>	<div class="score-left-text (custom class)"> ... </div>