Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.

Watch Video

Copy the code below and paste into your text editor.

<div class="pc0 pc9">
<table class="layout"><tr>

<td class="col1">
<div class="pc9w1">
<div class="pc9w2">
<div class="pc9w3">
<h3>Lorem ipsum</h3>
<h5>Top Stories:</h5>
<ul class="bluearrows">
<li><a href="{linkplaceholder}">Lorem Ipsum quam lobortis neque</a></li>
<li><a href="{linkplaceholder}">Rossi es doram tortor in eleifend imperdiet</a></li>
<li><a href="{linkplaceholder}">Lentoro lorem sem suscipit ipsum</a></li>
</ul><p class="bluearrows"><a href="{linkplaceholder}">View All News</a></p>
</div>
</div>
</div>
</td>

<td class="col2">
<div class="pc9w1">
<div class="pc9w2">
<div class="pc9w3">
<h3>Aliquam commodo</h3>
<p class="thumb"><img src="/images/pc4/pc4_nc_sgm.jpg" alt="place alt text here" width="112" height="80"/></p>
<p>Aliquam commodo quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.</p>
<p class="bluearrows"><a href="{linkplaceholder}">Watch Video</a></p>
</div>
</div>
</div>
</td>

<td class="col3">
<div class="pc9w1">
<div class="pc9w2">
<div class="pc9w3">
<h3>Maecenas dictum</h3>
<p class="thumb"><img src="/images/pc4/pc4_scott_execper1.jpg" alt="place alt text here" width="112" height="80"/></p>
<p>Maecenas dictum tristique diam. Sed interdum. Curabitur tristique nisi vel tortor. Quisque egestas mollis odio. Cras consequat pulvinar velit.</p>
<p class="bluearrows"><a href="{linkplaceholder}">Watch Video</a></p>
</div>
</div>
</div>
</td>

<td class="col4">
<div class="pc9w1">
<div class="pc9w2">
<div class="pc9w3">
<h3>Sed auctor</h3>
<p class="thumb"><img src="/images/pc4/pc4_solaris_zfs_engr.jpg" alt="place alt text here" width="112" height="80"/></p>
<p>Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.</p>
<p class="bluearrows"><a href="{linkplaceholder}">Watch Video</a></p>
</div>
</div>
</div>
</td>

</tr></table>
</div>

Templates:

Hero w/ Regular Tabs view tagged view untagged
Hero w/ Regular Tabs & Just Text view tagged view untagged
Hero w/ Toggle Buttons view tagged view untagged

Adding id="pc9v1" to the wrapping div triggers interactive "carousel" behavior. Then, one or more of the four content boxes can contain carousel content.

Each carousel must have two or more "panes." There is no upper limit on the number of panes.

Numbering (e.g. 1/4) can be turned on or off by adding/removing class="pc9carousel-numbering" from the <h3> (see code for example).

The height of the content, including the thumbnail, is limited to 222px. Any content exceeding this height will be cut off from view.

Note: tabs and grey background are not included in this component. They're only shown for context.

Lorem

Lorem Ipsum Dolor Sit Amet Consequat Dol

g37 or hb01 goes here

Aliqam commodo

Video Link

Quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.

Video Link

Aliquam commodo quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.

Video Link

Maecenas dictum tristique diam. Sed interdum. Curabitur tristique nisi vel tortor. Quisque egestas mollis odio. Cras consequat pulvinar velit.

Video Link

Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.

Aliquam commodo

Video Link

Aliquam commodo quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.

Video Link

Maecenas dictum tristique diam. Sed interdum. Curabitur tristique nisi vel tortor. Quisque egestas mollis odio. Cras consequat pulvinar velit.

Video Link

Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.

Sed auctor

Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.

Watch Video

Copy the code below and paste into your text editor.

<div class="pc0 pc9" id="pc9v1">
<table class="layout"><tr>

<h3 class="pc9carousel-numbering">Aliqam commodo</h3>
	<div class="pc9carousel">

<div class="pane">
		<p class="thumb"><img src="/images/pc4/pc4_videosample.jpg" alt="place alt text here" width="112" height="80"/></p>
		<p><strong><a href="{placeholder}" class="videoicon iconleft">Video Link</a></strong></p>
		<p>Quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.</p>
		<p class="bluearrows"><a href="{linkplaceholder}">More</a></p>
		</div>

<div class="pane">
		<p class="thumb"><img src="/images/pc4/pc4_nc_sgm.jpg" alt="place alt text here" width="112" height="80"/></p>
		<p><strong><a href="{placeholder}" class="videoicon iconleft">Video Link</a></strong></p>
		<p>Aliquam commodo quam lobortis neque. Proin luctus, tortor in eleifend imperdiet, lorem sem suscipit ipsum, quis adipiscing mi felis non quam.</p>
		<p class="bluearrows"><a href="{linkplaceholder}">More</a></p>
		</div>

<div class="pane">
		<p class="thumb"><img src="/images/pc4/pc4_scott_execper1.jpg" alt="place alt text here" width="112" height="80"/></p>
		<p><strong><a href="{placeholder}" class="videoicon iconleft">Video Link</a></strong></p>
		<p>Maecenas dictum tristique diam. Sed interdum. Curabitur tristique nisi vel tortor. Quisque egestas mollis odio. Cras consequat pulvinar velit.</p>
		<p class="bluearrows"><a href="{linkplaceholder}">More</a></p>
		</div>

<div class="pane">
		<p class="thumb"><img src="/images/pc4/pc4_solaris_zfs_engr.jpg" alt="place alt text here" width="112" height="80"/></p>
		<p><strong><a href="{placeholder}" class="videoicon iconleft">Video Link</a></strong></p>
		<p>Sed auctor purus quis lectus. Maecenas libero. Ut pulvinar malesuada ipsum. In augue. Aliquam at sapien. Sed pede quam, posuere ut, porttitor quis, lobortis nec, erat.</p>
		<p class="bluearrows"><a href="{linkplaceholder}">More</a></p>
		</div>

</div>

</div>
</div>
</div>
</td>

<td class="col2">
<div class="pc9w1">
<div class="pc9w2">
<div class="pc9w3">
<h3>Lorem ipsum</h3>
<h5>Top Stories:</h5>
<ul class="bluearrows">
<li><a href="{linkplaceholder}">Lorem Ipsum quam lobortis neque</a></li>
<li><a href="{linkplaceholder}">Rossi es doram tortor in eleifend imperdiet</a></li>
<li><a href="{linkplaceholder}">Lentoro lorem sem suscipit ipsum</a></li>
</ul><p class="bluearrows"><a href="{linkplaceholder}">View All News</a></p>
</div>
</div>
</div>
</td>

<h3>Aliquam commodo</h3>
	<div class="pc9carousel">

</div>

</div>
</div>
</div>
</td>

</tr></table>
</div>

PC09 White content boxes

Include:

Definition

Usage

All Templates Referencing this Component

v0 White content boxes

Lorem ipsum

Top Stories:

Aliquam commodo

Maecenas dictum

Sed auctor

Templates:

v1 White Content Boxes w/ Carousel

Aliqam commodo

Lorem ipsum

Top Stories:

Aliquam commodo

Sed auctor

No Templates Reference this