CMS Widget

by ritcheyer

HTML

<link rel="stylesheet" href="http://static.move.com/lib/rdx/6.0.03_1/homepage.css">
<div class="cmsWidget smallWidget">
    <div class="imgDescrip">
        <img src="http://placehold.it/132x90" />
    </div>
    <div class="descrip">
        <h5>Risus Malesuada Ligula</h5>
        <p><a href="#" title="Learn More &rsaquo;">Learn More &rsaquo;</a></p>
    </div>
</div>
<div class="cmsWidget largeWidget">
    <div class="imgDescrip">
        <img src="http://placehold.it/352x240" />
        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>
<div class="cmsWidget largeWidget video">
    <div class="imgDescrip">
        <img src="http://placehold.it/352x240" />
    </div>
    <div class="descrip">
        <h5>Risus Malesuada Ligula</h5>
        <ul>
            <li><a href="#" title="Lorem">Lorem</a></li>
            <li><a href="#" title="Ipsum">Ipsum</a></li>
            <li><a href="#" title="Dolor">Dolor</a></li>
        </ul>
    </div>
</div>

CSS

/* reset */
.cmsWidget .descrip ul,
.cmsWidget .descrip ol,
.cmsWidget .descrip li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cmsWidget p,
.cmsWidget h5 {
    margin: 0;
    padding: 0;
}

/* common attributes */
.cmsWidget .descrip ol,
.cmsWidget .descrip ul {
    overflow: hidden;
    margin-bottom: 5px;
}
/* 
Commenting out to allow for default styling..  
These font sizes are only to be used on RDC​
.cmsWidget p,
.cmsWidget li  { font-size: 120%; }
*/
.cmsWidget {
    /* adjust the first px dimension as needed */
    margin:  15px auto; 
    display: block;
}

/* let the height grow naturally */
.cmsWidget.smallWidget { width: 132px; }
.cmsWidget.largeWidget { width: 352px; }

/* any styling specific to the video */
.cmsWidget.video {  }

.cmsWidget .imgDescrip { position: relative; }
.largeWidget .imgDescrip p {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 10px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,.3);
    color: #000;
}

.cmsWidget h5  { /*font-size: 110%;*/ margin-top: 10px;}
.cmsWidget img { display: block;  }

.cmsWidget .descrip li {
    float: left;
    margin: 5px 0 0 5px;
    padding-left: 5px;
    border-left: 1px solid #666;
}
.cmsWidget .descrip li:first-child {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}