article_types

Article type - bio

A bio leadin, featured on the homepage

<div style="width:360px;">

    <a href="#" class="bio">
        <span class="title"><strong>Tim Foley</strong></span>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
        <span class="readmore"><strong>View Bio</strong></span>

        <img src="uploads/bio-tim.jpg" alt="mugshot: Tim Foley" />
    </a>

</div>

Article type - image

An article, listed on the homepage, containing text and a background image

<div style="width:260px;">

    <article class="type-img" style="background-image: url(uploads/news-story-3.jpg);">
        <a href="#">
            <span class="heading">Japanese Women Win Seven Medals, Two Gold, at Golden Grand Prix Final
                <strong>
                    Read more <i class="icn icn-readmore"></i>
                </strong>
            </span>
        </a>
    </article>

</div>

Article type - Location

An article for featuring the location of an event

Mexico Olympic Stadium

Mexico Olympic Stadium

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui.

Address 4871 Clear Rise Bank
Mexico City 70796
MEX
Phone (985) 847-0020 
<div style="width:550px;">

<article class="location type-vert clearfix margin">
    <div class="whiteBox shadowBox">
        <div class="imgWrap">
            <a href="#"><img src="uploads/location-1.jpg" alt="Mexico Olympic Stadium" /></a>
        </div>
        <div class="textWrap">
            <h2 class="heading"><a href="#">Mexico Olympic Stadium</a></h2>
            <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui.</p>
            <div class="row">
                <div class="col-sm-7">
                    <strong>Address</strong>
                    4871 Clear Rise Bank<br/>
                    Mexico City 70796<br/>
                    MEX
                </div>
                <div class="col-sm-5">
                    <strong>Phone</strong>
                    (985) 847-0020
                </div>
            </div>
        </div>
    </div><!-- .whiteBox -->
</article>

</div>

Photo of the day

Photo of the day along with caption. This is the variety with navy caption background.

Champion of the week

Champion of the week: John Jameson

John Jameson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, quos in animi impedit consequuntur sunt quaerat est nobis accusamus atque.

Open caption

It also comes in navy

Champion of the week

Champion of the week: John Jameson

John Jameson

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, quos in animi impedit consequuntur sunt quaerat est nobis accusamus atque.

Open caption 
<div id="newsWall" style="width:360px;">

    <div class="featuredPhoto shadowBox">
        <p class="title">Champion of the week</p>
        <img src="uploads/championoftheweek.jpg" alt="Champion of the week: John Jameson" />
        <div class="caption">
            <p><strong>John Jameson</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, quos in animi impedit consequuntur sunt quaerat est nobis accusamus atque.</p>
            <a href="#"><i class="icn icn-caption"><span>Open caption</span></i></a>
        </div>
    </div>

    <p style="margin: 20px 0 40px;"><strong>It also comes in navy</strong></p>

    <div class="featuredPhoto shadowBox navy">
        <p class="title">Champion of the week</p>
        <img src="uploads/championoftheweek.jpg" alt="Champion of the week: John Jameson" />
        <div class="caption">
            <p><strong>John Jameson</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, quos in animi impedit consequuntur sunt quaerat est nobis accusamus atque.</p>
            <a href="#"><i class="icn icn-caption"><span>Open caption</span></i></a>
        </div>
    </div>

</div>

Article type - Text horz

A text based article, aligned horizontally



<div style="width: 780px;">

<article class="type-horz clearfix">
    <img src="uploads/news-horz-1.jpg" alt="Gazumov Upends Olympic Rivals for Crown at Volden Grand Prix Final">
    <div class="whiteBox">
        <div class="tags clearfix">
            <span class="tag orange hidden-tb">featured</span>
            <span class="tag navy hidden-tb">Tag Name</span>
        </div>
        <h2 class="heading"><a href="#">Gazumov Upends Olympic Rivals for Crown at Volden Grand Prix Final</a></h2>
        <p class="meta hidden-tb">Friday 1 August 2014 <span class="divider-dot">•</span> 1AM <span class="divider-dot">•</span> 43 comments</p>
        <p><span class="hidden-tb">BAKU (July 25) – In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit...</span><a href="#">Read more <i class="icn icn-readmore visible-tb"></i></a></p>
    </div><!-- .whiteBox -->
</article>

</div>

Article type - Text vert

A text based article, aligned vertically

<div style="width:550px;">

    <article class="type-big shadowBox clearfix">
        <img src="uploads/news-big-2.jpg" alt="Japanese Women Win Seven Medals, Two Gold, at Golden Grand Prix Final">
        <div class="whiteBox">
            <div class="tags clearfix">
                <span class="tag orange hidden-tb">featured</span>
                <span class="tag navy">Most commented</span>
            </div>
            <h2 class="heading"><a href="#">Japanese Women Win Seven Medals, Two Gold, at Golden Grand Prix Final</a></h2>
            <p class="meta hidden-tb">Friday 1 August 2014 <span class="divider-dot">•</span> 1AM <span class="divider-dot">•</span> 43 comments</p>
            <p><span class="hidden-tb">As the wrestling portion of the Commonwealth Games closed on Thursday night in Glasgow, more than 2000 fans streamed out of the... </span><a href="#">Read more <i class="icn icn-readmore visible-tb"></i></a></p>
        </div><!-- .whiteBox -->
    </article>

</div>

Article type - Text vert - Big

A text based article, aligned vertically, used on the homepage as a feature article

<div style="width:550px;">

    <article class="type-big shadowBox clearfix">
        <a href="#"><img src="uploads/news-big-2.jpg" alt="Japanese Women Win Seven Medals, Two Gold, at Golden Grand Prix Final" /></a>
        <div class="outer">
            <div class="whiteBox">
                <div class="tags clearfix">
                    <span class="tag orange hidden-tb">featured</span>
                    <span class="tag navy">Most commented</span>
                </div>
                <h2 class="heading"><a href="#">Japanese Women Win Seven Medals, Two Gold, at Golden Grand Prix Final</a></h2>
                <p class="meta hidden-tb">Friday 1 August 2014 <span class="divider-dot">&bull;</span> 1AM <span class="divider-dot">&bull;</span> <a href="#">43 comments</a></p>
                <p><span class="hidden-tb">As the wrestling portion of the Commonwealth Games closed on Thursday night in Glasgow, more than 2000 fans streamed out of the... </span><a href="#" class="readmore">Read more <i class="icn icn-readmore visible-tb"></i></a></p>
            </div><!-- .whiteBox -->
        </div><!-- .outer -->
    </article>

</div>

Article type - video

An article, listed on the homepage, containing a video.


<div style="width:360px">


    <article class="type-vid" style="background-image: url(uploads/news-story-2.jpg);">
        <a href="#">
            <span class="heading"><i class="left icn icn-play"></i>Manville, Lee Win Two for US in Cadet Wrestling World Championships</span>
        </a>
    </article>

</div>

Captioned image

A captioned image for any page.

This is a large landscape image.
This is a large landscape image. Images are the same ratio as images used for article previews. This text is an example of a caption. Photo credit: Joe Bloggs
<div style="width:650px;">

    <figure>
        <img src="uploads/sample-image1.jpg" alt="This is a large landscape image." />
        <figcaption>This is a large landscape image. Images are the same ratio as images used for article previews. This text is an example of a caption. <strong>Photo credit: Joe Bloggs</strong></figcaption>
    </figure>

</div>

Event

An event, listed on the homepage. The image example, to be connected to the CMS, uploadable by the user.

<div style="width:360px">

    <div class="event">
        <a href="#" class="title">
            <i class="icn icn-globe"></i> Los Angeles, USA <span class="date">12 June - 13 July</span>
        </a>
        <div class="content">
            <h3 class="event-title"><a href="#">2014 Men’s Freestyle World Cup</a></h3>
            <a href="#" class="event-image"><img src="uploads/event-1.jpg" alt="event: 2014 Men’s Freestyle World Cup" /></a>
            <div class="tags clearfix">
                <a href="#" class="tag orange">Tickets</a>
                <a href="#" class="tag pearl">Registration</a>
            </div>
        </div><!-- .content -->
    </div>

</div>