Introduction Last updated: 2019-10-01

Content Box styles

School Box

We've created 4 themes for the school content box. Each theme can be applied by adding a class to the overall wrapper.

  • no class (default, green theme)
  • tl-blue
  • tl-violet
  • tl-gray
To apply any, just add the class to the wrapper div:

<div class="tl-school-outer-wrap tl-blue">

Image Dimensions

Logo: 200px x 195px
Banner: 650px x 310px

Example:
Ball State University
logo
Accredited
|
Non-Accredited

spotlight program 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and it to make a type specimen book.

Availability options
  • online
  • On-Campus
  • Hybrid format

spotlight program 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and it to make a type specimen book.

Availability options
  • online
  • On-Campus
  • Hybrid format
Tuition
On Campus cost:
In state:
$410 per credit
Out of state:
$1129 per credit
Online cost:
In state:
$410 per credit
Out of state:
$1129 per credit
Master Offered
  • Maser of Arts in social Psychology
  • Master of Arts or Science in Sports Psychology
  • Master of Arts or Science in Educational Psychology
  • Master of Arts in Social Psychology and Clinical Mental Health(dual major)
BSU History & Facts
  • Boast mnay classes of 10 or fewer students
  • Allow ooption for students to participate in graduate assistantships to help cover the cost of degree
  • First School is the US to earn learner support certification from Quality Matters(nationaly recognized standard of best practices for online and blended learning.)
  • Team Mascot:Ball State athletic teams are known as the Cardinals.
HTML Output
                  <div class="tl-school-outer-wrap">
  <!-- Header Section Start -->
  <div class="row">
    <div class="col-sm-12">
        <div class="tl-school-name">
          Ball State University
          <div class="tl-accordian-symbol"><i class="fa fa-chevron-down tl-fa-icons"></i></div>
        </div>
    </div>
  </div>
  <!-- Header Section End -->
  <!--- Logo , Banner & Button section Start -->
  <div class="row">
    <div class="col-md-12 col-lg-7">
        <!--- Logo , Banner Section Start -->
        <div class="row  d-flex">
          <div class="col-sm-4 col-4 justify-content-center align-self-center">
              <div class="tl-school-logo-img">
                <img src="/wiki/assets/images/schoo-logo.jpg" alt="logo" class="tl-center-img">
              </div>
          </div>
          <div class="col-sm-8 col-8 justify-content-center align-self-center">
              <div class="tl-school-banner-wrap" style="background-image:url('/wiki/assets/images/school-banner.jpg')"></div>
          </div>
        </div>
        <!--- Logo , Banner Section End -->
    </div>
    <div class="col-md-12 col-lg-5">
        <!-- Button section Start  -->
        <div class="tl-right-school-section">
          <div class="tl-button-list">
              <button class="btn tl-long-btn-wrap btn-solid">Website</button>
              <button class="btn tl-long-btn-wrap">Admission</button>
              <button class="btn tl-long-btn-wrap">Financial AID</button>
          </div>
        </div>
        <!-- Button section End  -->
    </div>
  </div>
  <!--- Logo , Banner & Button section End -->
  <!-- Body Section Start -->
  <div class="row tl-hide-section">
    <div class="col-md-12 col-lg-7">
        <!-- Accredited Section Start -->
        <div class="tl-accredited-section">
          <div class="tl-accredited-text tl-active-txt">Accredited</div> |
          <div class="tl-accredited-text">Non-Accredited</div>
        </div>
        <!--Accredited Section End -->
        <!-- spotlight program section Start -->
        <div class="tl-spot-light-section">
          <div class="tl-spot-light-program-wrap">
              <h3 class="tl-spot-light-title">spotlight program 1</h3>
              <p class="tl-spot-light-content ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  it to make a type specimen book.</p>
              <div class="tl-availablity-wrap">
                <div class="tl-spot-sub-title">
                    Availability options
                </div>
                <ul class="tl-spot-available-list">
                    <li>online</li>
                    <li>On-Campus</li>
                    <li>Hybrid format</li>
                </ul>
              </div>
          </div>
          <div class="tl-spot-light-program-wrap">
              <h3 class="tl-spot-light-title">spotlight program 2</h3>
              <p class="tl-spot-light-content ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and  it to make a type specimen book.</p>
              <div class="tl-availablity-wrap">
                <div class="tl-spot-sub-title">
                    Availability options
                </div>
                <ul class="tl-spot-available-list">
                    <li>online</li>
                    <li>On-Campus</li>
                    <li>Hybrid format</li>
                </ul>
              </div>
          </div>
        </div>
        <!-- spotlight program section End -->
        <!-- Tuition Section Start -->
        <div class="tl-tuition-section">
          <div class="tl-tuition-header">Tuition</div>
          <div class="tl-cost-section-outer">
              <div class="tl-cost-section">
                <div class="tl-cost-title">
                    On Campus cost:
                </div>
                <div class="tl-state-cost">
                    <div class="tl-cost-label">In state:</div>
                    <div class="tl-cost-value">$410 per credit</div>
                </div>
                <div class="tl-out-of-state-cost">
                    <div class="tl-cost-label">Out of state:</div>
                    <div class="tl-cost-value">$1129 per credit</div>
                </div>
              </div>
              <div class="tl-cost-section">
                <div class="tl-cost-title">
                    Online cost:
                </div>
                <div class="tl-state-cost">
                    <div class="tl-cost-label">In state:</div>
                    <div class="tl-cost-value">$410 per credit</div>
                </div>
                <div class="tl-out-of-state-cost">
                    <div class="tl-cost-label">Out of state:</div>
                    <div class="tl-cost-value">$1129 per credit</div>
                </div>
              </div>
          </div>
        </div>
        <!-- Tuition Section End -->
    </div>
    <div class="col-md-12 col-lg-5">
        <!-- master offer section Start -->
        <div class="tl-master-offer-section">
          <div class="tl-master-offer-header"><div class="tl-master-header-text">Master Offered</div></div>
          <ul class="tl-school-category-list tl-custom-bullet">
              <li>Maser of Arts in social Psychology</li>
              <li>Master of Arts or Science in Sports Psychology</li>
              <li>Master of Arts or Science in Educational Psychology</li>
              <li>Master of Arts in Social Psychology and Clinical Mental Health(dual major)</li>
          </ul>
        </div>
        <!-- master offer section End -->
        <!-- School info section Start -->
        <div class="tl-school-info-wrap">
          <div class="tl-school-info-header-wrap">
              <div class="tl-school-info-header">BSU History &amp; Facts</div>
          </div>
          <ul class="tl-school-info-list tl-custom-bullet">
              <li>Boast mnay classes of 10 or fewer students</li>
              <li>Allow ooption for students to participate in graduate assistantships to help cover the cost of degree</li>
              <li>First School is the US to earn learner support certification from Quality Matters(nationaly recognized standard of best practices for online and blended learning.)</li>
              <li>Team Mascot:Ball State athletic teams are known as the Cardinals.</li>
          </ul>
        </div>
        <!-- School info section End -->
    </div>
  </div>
  <!-- Body Section End -->
</div>
&lt;div class=&quot;tl-school-outer-wrap&quot;&gt; &lt;!-- Header Section Start --&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-sm-12&quot;&gt; &lt;div class=&quot;tl-school-name&quot;&gt; Ball State University &lt;div class=&quot;tl-accordian-symbol&quot;&gt;&lt;i class=&quot;fa fa-chevron-down tl-fa-icons&quot;&gt;&lt;/i&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Header Section End --&gt; &lt;!--- Logo , Banner &amp; Button section Start --&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-md-12 col-lg-7&quot;&gt; &lt;!--- Logo , Banner Section Start --&gt; &lt;div class=&quot;row d-flex&quot;&gt; &lt;div class=&quot;col-sm-4 col-4 justify-content-center align-self-center&quot;&gt; &lt;div class=&quot;tl-school-logo-img&quot;&gt; &lt;img src=&quot;/wiki/assets/images/schoo-logo.jpg&quot; alt=&quot;logo&quot; class=&quot;tl-center-img&quot;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-sm-8 col-8 justify-content-center align-self-center&quot;&gt; &lt;div class=&quot;tl-school-banner-wrap&quot; style=&quot;background-image:url('/wiki/assets/images/school-banner.jpg')&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--- Logo , Banner Section End --&gt; &lt;/div&gt; &lt;div class=&quot;col-md-12 col-lg-5&quot;&gt; &lt;!-- Button section Start --&gt; &lt;div class=&quot;tl-right-school-section&quot;&gt; &lt;div class=&quot;tl-button-list&quot;&gt; &lt;button class=&quot;btn tl-long-btn-wrap btn-solid&quot;&gt;Website&lt;/button&gt; &lt;button class=&quot;btn tl-long-btn-wrap&quot;&gt;Admission&lt;/button&gt; &lt;button class=&quot;btn tl-long-btn-wrap&quot;&gt;Financial AID&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Button section End --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--- Logo , Banner &amp; Button section End --&gt; &lt;!-- Body Section Start --&gt; &lt;div class=&quot;row tl-hide-section&quot;&gt; &lt;div class=&quot;col-md-12 col-lg-7&quot;&gt; &lt;!-- Accredited Section Start --&gt; &lt;div class=&quot;tl-accredited-section&quot;&gt; &lt;div class=&quot;tl-accredited-text tl-active-txt&quot;&gt;Accredited&lt;/div&gt; | &lt;div class=&quot;tl-accredited-text&quot;&gt;Non-Accredited&lt;/div&gt; &lt;/div&gt; &lt;!--Accredited Section End --&gt; &lt;!-- spotlight program section Start --&gt; &lt;div class=&quot;tl-spot-light-section&quot;&gt; &lt;div class=&quot;tl-spot-light-program-wrap&quot;&gt; &lt;h3 class=&quot;tl-spot-light-title&quot;&gt;spotlight program 1&lt;/h3&gt; &lt;p class=&quot;tl-spot-light-content &quot;&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and it to make a type specimen book.&lt;/p&gt; &lt;div class=&quot;tl-availablity-wrap&quot;&gt; &lt;div class=&quot;tl-spot-sub-title&quot;&gt; Availability options &lt;/div&gt; &lt;ul class=&quot;tl-spot-available-list&quot;&gt; &lt;li&gt;online&lt;/li&gt; &lt;li&gt;On-Campus&lt;/li&gt; &lt;li&gt;Hybrid format&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tl-spot-light-program-wrap&quot;&gt; &lt;h3 class=&quot;tl-spot-light-title&quot;&gt;spotlight program 2&lt;/h3&gt; &lt;p class=&quot;tl-spot-light-content &quot;&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and it to make a type specimen book.&lt;/p&gt; &lt;div class=&quot;tl-availablity-wrap&quot;&gt; &lt;div class=&quot;tl-spot-sub-title&quot;&gt; Availability options &lt;/div&gt; &lt;ul class=&quot;tl-spot-available-list&quot;&gt; &lt;li&gt;online&lt;/li&gt; &lt;li&gt;On-Campus&lt;/li&gt; &lt;li&gt;Hybrid format&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- spotlight program section End --&gt; &lt;!-- Tuition Section Start --&gt; &lt;div class=&quot;tl-tuition-section&quot;&gt; &lt;div class=&quot;tl-tuition-header&quot;&gt;Tuition&lt;/div&gt; &lt;div class=&quot;tl-cost-section-outer&quot;&gt; &lt;div class=&quot;tl-cost-section&quot;&gt; &lt;div class=&quot;tl-cost-title&quot;&gt; On Campus cost: &lt;/div&gt; &lt;div class=&quot;tl-state-cost&quot;&gt; &lt;div class=&quot;tl-cost-label&quot;&gt;In state:&lt;/div&gt; &lt;div class=&quot;tl-cost-value&quot;&gt;$410 per credit&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tl-out-of-state-cost&quot;&gt; &lt;div class=&quot;tl-cost-label&quot;&gt;Out of state:&lt;/div&gt; &lt;div class=&quot;tl-cost-value&quot;&gt;$1129 per credit&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tl-cost-section&quot;&gt; &lt;div class=&quot;tl-cost-title&quot;&gt; Online cost: &lt;/div&gt; &lt;div class=&quot;tl-state-cost&quot;&gt; &lt;div class=&quot;tl-cost-label&quot;&gt;In state:&lt;/div&gt; &lt;div class=&quot;tl-cost-value&quot;&gt;$410 per credit&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tl-out-of-state-cost&quot;&gt; &lt;div class=&quot;tl-cost-label&quot;&gt;Out of state:&lt;/div&gt; &lt;div class=&quot;tl-cost-value&quot;&gt;$1129 per credit&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Tuition Section End --&gt; &lt;/div&gt; &lt;div class=&quot;col-md-12 col-lg-5&quot;&gt; &lt;!-- master offer section Start --&gt; &lt;div class=&quot;tl-master-offer-section&quot;&gt; &lt;div class=&quot;tl-master-offer-header&quot;&gt;&lt;div class=&quot;tl-master-header-text&quot;&gt;Master Offered&lt;/div&gt;&lt;/div&gt; &lt;ul class=&quot;tl-school-category-list tl-custom-bullet&quot;&gt; &lt;li&gt;Maser of Arts in social Psychology&lt;/li&gt; &lt;li&gt;Master of Arts or Science in Sports Psychology&lt;/li&gt; &lt;li&gt;Master of Arts or Science in Educational Psychology&lt;/li&gt; &lt;li&gt;Master of Arts in Social Psychology and Clinical Mental Health(dual major)&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- master offer section End --&gt; &lt;!-- School info section Start --&gt; &lt;div class=&quot;tl-school-info-wrap&quot;&gt; &lt;div class=&quot;tl-school-info-header-wrap&quot;&gt; &lt;div class=&quot;tl-school-info-header&quot;&gt;BSU History &amp;amp; Facts&lt;/div&gt; &lt;/div&gt; &lt;ul class=&quot;tl-school-info-list tl-custom-bullet&quot;&gt; &lt;li&gt;Boast mnay classes of 10 or fewer students&lt;/li&gt; &lt;li&gt;Allow ooption for students to participate in graduate assistantships to help cover the cost of degree&lt;/li&gt; &lt;li&gt;First School is the US to earn learner support certification from Quality Matters(nationaly recognized standard of best practices for online and blended learning.)&lt;/li&gt; &lt;li&gt;Team Mascot:Ball State athletic teams are known as the Cardinals.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- School info section End --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Body Section End --&gt; &lt;/div&gt;

Author Box

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Example:
author-image
Jenna Amatualli
Reporter, Huffpost

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

HTML Output
                  <div class="tl-author-content-box">
  <div class="media">
    <div class="tl-author-img align-self-center mr-3">
      <img class="img-fluid" src="/wiki/assets/images/author-image3.jpg" alt="author-image">
    </div>
    <div class="media-body align-self-center">
      <h5 class="tl-author-name">Jenna Amatualli</h5>
      <div class="tl-author-job">Reporter, Huffpost</div>
      <div class="tl-author-social-wrap">
        <div class="tl-author-facebook tl-author-social-link">
          <a href="#"><i class="fab fa-facebook-square"></i></a>
        </div>
        <div class="tl-author-instagram tl-author-social-link">
          <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="tl-author-twitter tl-author-social-link">
          <a href="#"><i class="fab fa-twitter-square"></i></a>
        </div>
        <div class="tl-author-linkedin tl-author-social-link">
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
        <div class="tl-author-youtube tl-author-social-link">
          <a href="#"><i class="fab fa-youtube-square"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="tl-author-describe">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>
&lt;div class=&quot;tl-author-content-box&quot;&gt; &lt;div class=&quot;media&quot;&gt; &lt;div class=&quot;tl-author-img align-self-center mr-3&quot;&gt; &lt;img class=&quot;img-fluid&quot; src=&quot;/wiki/assets/images/author-image3.jpg&quot; alt=&quot;author-image&quot;&gt; &lt;/div&gt; &lt;div class=&quot;media-body align-self-center&quot;&gt; &lt;h5 class=&quot;tl-author-name&quot;&gt;Jenna Amatualli&lt;/h5&gt; &lt;div class=&quot;tl-author-job&quot;&gt;Reporter, Huffpost&lt;/div&gt; &lt;div class=&quot;tl-author-social-wrap&quot;&gt; &lt;div class=&quot;tl-author-facebook tl-author-social-link&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-facebook-square&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;tl-author-instagram tl-author-social-link&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;tl-author-twitter tl-author-social-link&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-twitter-square&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;tl-author-linkedin tl-author-social-link&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-linkedin&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;tl-author-youtube tl-author-social-link&quot;&gt; &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-youtube-square&quot;&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tl-author-describe&quot;&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;
NOTE : This Below code avoid <P> and <br> in Wordpress Editor

<!-- wp:html --> <!-- /wp:html -->



Button Box

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
Example:

What Should you look for in an online master's in counseling program?

Discover the important factors to your online counseling degree with these guides.

Online Master's in Mental Health Counseling Programs Online Master's in School Counselling Programs
HTML Output
                  <div class="tl-button-content-box">
  <div class="row">
    <div class="col-lg-7">
      <div class="tl-content-section">
        <h4>What Should you look for in an online master's in counseling program?</h4>
        <p>Discover the important factors to your online counseling degree with these guides.</p>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="tl-button-section">
        <a href="#" class="tl-box-btn">Online Master's in Mental Health Counseling Programs</a>
        <a href="#" class="tl-box-btn">Online Master's in School Counselling Programs</a>
      </div>
    </div>
  </div>
</div>
&lt;div class=&quot;tl-button-content-box&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-lg-7&quot;&gt; &lt;div class=&quot;tl-content-section&quot;&gt; &lt;h4&gt;What Should you look for in an online master's in counseling program?&lt;/h4&gt; &lt;p&gt;Discover the important factors to your online counseling degree with these guides.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-lg-5&quot;&gt; &lt;div class=&quot;tl-button-section&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;tl-box-btn&quot;&gt;Online Master's in Mental Health Counseling Programs&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;tl-box-btn&quot;&gt;Online Master's in School Counselling Programs&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
NOTE : This Below code avoid <P> and <br> in Wordpress Editor

<!-- wp:html --> <!-- /wp:html -->