SOMC

HTML Site elements

Main List

Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List inside List Example

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Order List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List inside List Example

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image Alignment

Left Aligned Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec magna mauris. In hac habitasse platea dictumst. Etiam sed commodo magna. Nulla in lacus pretium, posuere tortor eget, ullamcorper nisi. Nulla facilisi. Suspendisse consectetur erat at massa lobortis, ut porta nisl porta. In pellentesque vel nisl quis rutrum. Nunc lectus sapien, gravida vel pharetra eget, mattis id est. In orci leo, feugiat sed egestas a, porttitor non odio. Quisque at pellentesque erat. Donec gravida placerat fermentum. In varius pharetra nisl, ut eleifend orci mattis quis. Cras convallis tortor erat, id dapibus risus ornare nec. Proin tempor, risus et blandit egestas, massa erat mollis nisl, sed lobortis ligula orci eu elit. Proin convallis scelerisque risus, quis ultrices tellus pellentesque eu.

Add the class ‘alignleft‘ to an image.

Center Aligned Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec magna mauris. In hac habitasse platea dictumst. Etiam sed commodo magna. Nulla in lacus pretium, posuere tortor eget, ullamcorper nisi. Nulla facilisi. Suspendisse consectetur erat at massa lobortis, ut porta nisl porta. In pellentesque vel nisl quis rutrum. Nunc lectus sapien, gravida vel pharetra eget, mattis id est. In orci leo, feugiat sed egestas a, porttitor non odio. Quisque at pellentesque erat. Donec gravida placerat fermentum. In varius pharetra nisl, ut eleifend orci mattis quis. Cras convallis tortor erat, id dapibus risus ornare nec. Proin tempor, risus et blandit egestas, massa erat mollis nisl, sed lobortis ligula orci eu elit. Proin convallis scelerisque risus, quis ultrices tellus pellentesque eu.

Add the class ‘aligncenter‘ to an image.

Right Aligned Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec magna mauris. In hac habitasse platea dictumst. Etiam sed commodo magna. Nulla in lacus pretium, posuere tortor eget, ullamcorper nisi. Nulla facilisi. Suspendisse consectetur erat at massa lobortis, ut porta nisl porta. In pellentesque vel nisl quis rutrum. Nunc lectus sapien, gravida vel pharetra eget, mattis id est. In orci leo, feugiat sed egestas a, porttitor non odio. Quisque at pellentesque erat. Donec gravida placerat fermentum. In varius pharetra nisl, ut eleifend orci mattis quis. Cras convallis tortor erat, id dapibus risus ornare nec. Proin tempor, risus et blandit egestas, massa erat mollis nisl, sed lobortis ligula orci eu elit. Proin convallis scelerisque risus, quis ultrices tellus pellentesque eu.

Add the class ‘alignright‘ to an image.

Blockquote

Blockquote

Donec gravida placerat fermentum. In varius pharetra nisl, ut eleifend orci mattis quis. Cras convallis tortor erat.

HTML code

<blockquote>Donec gravida placerat fermentum. In varius pharetra nisl, ut eleifend orci mattis quis. Cras convallis tortor erat, id dapibus risus ornare nec. Proin tempor, risus et blandit egestas, massa erat mollis nisl, sed lobortis ligula orci eu elit. Proin convallis scelerisque risus, quis ultrices tellus pellentesque eu.</blockquote>

Blockquote With Image

The professional team at SOMC saved my lifeDavid

HTML code

<blockquote>
<img src=”https://www.somc.org/content/uploads/2017/08/bill.jpg” alt=”” width=”300″ height=”300″ class=”alignnone size-full wp-image-1382″ />I travel for fun, but stay close to home for heart care<small>Bill</small>
</blockquote>

See Example


Tables

First Name Last Name Username
Carlos Petruza cpetruza
Miguel Mudanzetti mudanzettimigue

HTML code

<div class=”table-responsive”>
<table class=”table table-bordered”>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Carlos</td>
<td>Petruza</td>
<td>cpetruza</td>
</tr>
<tr>
<td>Miguel</td>
<td>Mudanzetti</td>
<td>mudanzettimigue</td>
</tr>
</tbody>
</table>
</div>

See Example


Accordion Panel

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.
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.
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.

HTML code

<div class=”panel-group” id=”accordion” role=”tablist” aria-multiselectable=”true”>
<!– ini panel –>
<div class=”panel panel-default”>
<div class=”panel-heading” role=”tab” id=”headingOne”>
<span class=”panel-title”><a role=”button” data-toggle=”collapse” data-parent=”#accordion” href=”#collapseOne” aria-expanded=”true” aria-controls=”collapseOne”>Acordeon title</a></span>
</div>
<div id=”collapseOne” class=”panel-collapse collapse” role=”tabpanel” aria-labelledby=”headingOne”>
<div class=”panel-body”>
panel body content
</div>
</div>
</div>
<!– end panel –>
</div>

See Example


Floating Footer

This floating footer is present in all the site pages. To add/change this floating footer data go to the admin panel.

HTML code

<ul>
<li class=”snak-text”>More Information</li>
<li class=”phone-number”>(740) 356-7101</li>
<li class=”click-phone-number”><a href=”tel:7403567101″><i class=”fa fa-phone” aria-hidden=”true”></i></a></li>
<li class=”contct-email”><a href=”/online/contact/”><i class=”fa fa-envelope” aria-hidden=”true”></i></a></li>
<li class=”location-link”><a href=”#”><i class=”fa fa-map-marker” aria-hidden=”true”></i></a></li>
</ul>

HTML code

<ul class=”list-group”>
<li class=”list-group-item list-group-item-action”><a href=”#”>…</a></li>
<li class=”list-group-item list-group-item-action”><a href=”#”>…</a></li>
<li class=”list-group-item list-group-item-action”><a href=”#”>…</a></li>
</ul>

See Example


Responsive Iframe

Sports Motion – Brian Tennant

Use this responsive holder for any iframe you add to the site.

HTML code

<div class=”responsive-frame”>…you iframe here…</div>

See Example


Responsive maps

Address

1805 27th Street
Portsmouth, Ohio 45662
(740) 356-5000

View Large Map
View Facility Map

This code is used to display a map with corresponding data beside it.

HTML code

<div class=”row gmap”>
<div class=”col-md-8 map-col”><div class=”responsive-frame”>iframe</div></div>
<div class=”col-md-4 info-col”><h4>Address</h4> directions + link</div>
</div>

See Example


Team / Staff List

Shelly Carver

  • AFAA Certified Personal Trainer
  • AFAA Certified Group Exercise Instructor
  • WisenerS@somc.org

Contact Shelly

Use this component to show team staff information.

HTML code

<div class=”staff-row”>
<h3>Name</h3>
<div class=”staff-img”>img</div>
<div class=”staff-info”>info…</div>
</div>

See Example


FAQS

Why should I become a Corporate Partner for the SOMC Development Foundation?

By becoming a corporate partner, you are helping us improve the health and wellness of our community as we support an array of causes. Your donation will directly impact those in our area who are in need of support and will also allow us to offer opportunities for people to improve their health and wellness.

Not only will you be positively impacting the community but you will also receive exposure to thousands of community members through our events. Corporate partners will receive recognition through a variety of ways such as event shirts, live event acknowledgement, newspaper ads, and more.

HTML code

<div class=”question”>…</div>
<div class=”answer”><p>…</p></div>

See Example


Logos Grid

HTML code

<ul class=”logo-list”>
<li><a href=”#”>…</a></li>
</ul>

See Example


Carousels / Img Gallery

HTML code

<div class=”image-gallery”>[OWL SHORTCODE]</div>

See Example


Event List

HTML code

<div class=”event-list”>
<div class=”event-holder”>
<a href=”#”>
<div class=”date”>…</div>
<h4>…</h4>
<time>…</time>
</a>
</div>
<div class=”event-holder next-month”>…</div>
</div>

See Example


Information Box

Address & Directions

SOMC Cancer Center, 1121 Kinneys Lane. Portsmouth, OH 45662


Join Us on Facebook

Fighting Cancer in Your Community. Join now

HTML code

<div class=”infobox”>
<h2>…</h2>
<p>…</p>
<p class=”infobox-small”>…</p>
</div>

See Example


Index Page Boxes

Facility & Directions

SOMC offers LIFE Center access in Lucasville, Portsmouth and Wheelersburg.

Use this boxes ONLY for index pages.

HTML code

<div class=”access-boxes”>
<div class=”flexcard-group”>
<!– ini card –>
<div class=”flexcard-holder”>
<div class=”flexcard card”>
<div class=”card-img”><img src=”/content/uploads/2017/08/facility-1.jpg” alt=”” width=”500″ height=”215″ class=”alignnone size-full wp-image-8879″ /></div>
<div class=”card-body”><h4>Facility & Directions</h4><p class=”card-intro-txt”>SOMC offers LIFE Center access in Lucasville, Portsmouth and Wheelersburg.</p></div>
<div class=”card-footer”><a class=”btn btn-primary” href=”/life/facilities/”>Read more</a></div>
</div>
</div>
<!– end Card –>
</div>
</div>

See Example


This optional CSS adds the arrow for external links in sidebar items, in order to make it visible that you are going out of the site.

See Example on sidebar


Info Cards

SOMC Pharmacy Main Campus

Mon – Fri 7am – 6pm
Sat 7am – 1pm
Closed Sundays
1805 27th Street
Portsmouth, Ohio 45662

Call (740) 356-8101

HTML code

<div class=”access-boxes”>
<div class=”flexcard-group”>
<!– card one –>
<div class=”flexcard-holder”>
<div class=”flexcard card location-card”>
<div class=”card-body”>
<h3>Card Title</h3>
<address>Main info</address>
<p class=”call”><i class=”icon fa fa-phone” aria-hidden=”true”></i> Phone Number</p>
</div>
<div class=”card-footer”>
<a href=”#” class=”btn btn-primary”><i class=”icon fa fa-map-marker” aria-hidden=”true”></i> View Map</a>
</div>
</div>
</div>
<!– card Two –>
<div class=”flexcard-holder”>
<div class=”flexcard card location-card”>
<div class=”card-body”>
<h3>Card Title</h3>
<address>Main info</address>
<p class=”call”><i class=”icon fa fa-phone” aria-hidden=”true”></i> Phone Number</p>
</div>
<div class=”card-footer”>
<a href=”#” class=”btn btn-primary”><i class=”icon fa fa-map-marker” aria-hidden=”true”></i> View Map</a>
</div>
</div>
</div>
<!– aadd more cards –>
</div>
</div>

See Example


Doctors Cards

HTML code

<div class=”physician-result-list”>
<div class=”physician-result-holder”>
<a href=”#”>
<div class=”physician-result-img”>
<!– get provider image –>
<img src=”/content/plugins/find_providers/images/provider_default.jpg”>
</div>
<div class=”physician-result-data”>
<h3>Doctor Name</h3>
<p><strong>Specialty:</strong> General Surgery<br><strong>Phone:</strong> (740) 356-8772<br><strong>Insurance Preferences:</strong> -<br><strong>Accepting New Patients:</strong> No</p>
</div>
</a>
</div>
…. other cards

</div>

See Example

  • More information
  • (740) 356-5000