Common Styles and Scripts

Log in to deploy new versions or manage existing ones.

The common styles and scripts govern the look and feel of an EA website. To include these styles, include the following files after the dependencies:

<link rel='stylesheet' href='//assets.euractiv.com/style/v6/style-min.css'>
<script src='//assets.euractiv.com/style/v6/script-min.js'></script>

Dependencies

LibraryVersionNotes
jQuery>=1.11
Bootstrap3 >=3.3.0Both CSS and JS
Font Awesome>=4.2
html5shiv>=3.7should be included in an lt ie9 conditional comment
respond.js>=1.4should be included in an lt ie9 conditional comment

Browsers: The styles and scripts have been tested on Chrome, FireFox and IE8+. Note that IE8 has some issues in the supporting content that you need to watch out for and IE9 is missing some of the fancier CSS3 effects (shadows, background fades...).

Documentation and Examples


Following the principles of progressive design, we have some utilities that can help making the layout look its best even for some things that are difficult to do correctly in javascript.

These include:

window.EA.formatTimestame([int]timestamp, [str]fallback)
Due to server-side caching, it can be difficult to ensure that dates are formatted properly. This method will format a timestamp to a friendly human-readable format with a Font-Awesome icon.

It will be automatically called on elements with the following format: 
<span class="ea-dateformat" data-timestamp="[timstamp]">[server-side-date]</span>
window.EA.breakpoint.get()
Get the current breakpoint being shown to the user ("xs", "sm", "md" or "lg")
window.EA.breakpoint.check([string]check_size, [string]comparison)
Check if the current breakpoint matches a value.
check_size can be one of "xs", "sm", "md" or "lg".
comparison can be one of '==' (default), '!=', '>=', '<=', '>' or '<'
window.EA.breakpoint.onchange([string]handle, [function]callback)
Run a callback when the window breakpoint changes.
handle is a unique identifier for a callback
callback is the callback to run; it will receive the current breakpoint as its first argument and the previous breakpoint as its second parameter.
window.EA.breakpoint.offchange([string]handle)
Remove a previously registered onchange event registered with the identifier handle.
jquery.dotdotdot
jQuery dotdotdot is a plugin for truncating test with an ellipsis. See the project online documentation.

DateTime formatting function

Yesterday: 2015-10-13

Today:

Breakpoint functions

window.EA.breakpoint.get: the breakpoint at page load was:

window.EA.breakpoint.check: the breakpoint at page load was md or bigger:

window.EA.breakpoint.onchange: the breakpoint right now is:

Left-Right Align functions

Click the element to resize it.

This is some left floated text.
This is some right floated text. 



<h3>DateTime formatting function</h3>

<p>Yesterday:
    <span class="ea-dateformat" data-timestamp="1444744481">2015-10-13</span></p>

<p>Today: <span id="date-format-example"></span>
<script>(function () {
    var hourago = Math.round((Date.now() / 1000) - (60 * 60));
    $('#date-format-example').html(window.EA.formatTimestamp(hourago));
}());</script>


<h3>Breakpoint functions</h3>

<p>window.EA.breakpoint.get: the breakpoint at page load was:
    <span id="breakpoint-example-get"></span></p>
<script>$(function () {
    var bp = window.EA.breakpoint.get();
    $('#breakpoint-example-get').text(bp);
});</script>

<p>window.EA.breakpoint.check: the breakpoint at page load was md or bigger:
    <span id="breakpoint-example-check"></span></p>
<script>$(function () {
    var is_big = window.EA.breakpoint.check('md', '>=');
    $('#breakpoint-example-check').text(is_big ? 'yes': 'no');
});</script>

<p>window.EA.breakpoint.onchange: the breakpoint right now is:
    <span id="breakpoint-example-onchange"></span></p>
<script>$(function () {
    window.EA.breakpoint.onchange('rightnow', function (current) {
        $('#breakpoint-example-onchange').text(current);
    });
});</script>

<h3>Left-Right Align functions</h3>
<p>Click the element to resize it.</p>
<div class="clearfix">
    <div id="l-r-align-example" class="col-sm-12" style="outline:1px solid red">
        <div class="pull-left" style="outline:1px solid green">
            This is some left floated text.
        </div>
        <div class="pull-right" style="outline:1px solid blue">
            This is some right floated text.
        </div>
    </div>
</div>
<script>(function () {
    var i = 1;
    window.EA.l_r_align('#l-r-align-example', '.pull-left', '.pull-right');
    $('#l-r-align-example').on('click', function () {
        var wrapper = $('#l-r-align-example');
        if (!wrapper.is(':visible')) {
            return;
        }
        wrapper.attr('class', 'col-xs-' + (i * 3));
        $(window).trigger('resize');
        if (i === 4) {
            i = 0;
        }
        i += 1;
    });
}());</script>

All of the fonts on the website should be one of these. Naming convention:

.ea-font-[name]

.ea-font-primary: The primary font for use in blocks of text. Some examples:

  • Normal: The quick brown fox jumps over the lazy dog.
  • Bold: The quick brown fox jumps over the lazy dog.
  • Italic: The quick brown fox jumps over the lazy dog.
  • Bold Italic: The quick brown fox jumps over the lazy dog.

.ea-font-compact: A secondary font for supporting text. Some examples:

  • Normal: The quick brown fox jumps over the lazy dog.
  • Bold: The quick brown fox jumps over the lazy dog.
  • Italic: The quick brown fox jumps over the lazy dog.
  • Bold Italic: The quick brown fox jumps over the lazy dog.

.ea-font-nav: Use in navigational (clickable) titles:

A navigational title

.ea-font-title: Use in page titles:

A page title

.ea-font-subtitle: Use in subtitles:

A secondary title

<p><code>.ea-font-primary</code>: The primary font for use in blocks of text.
    Some examples:</p>
<ul class="ea-font-primary">
  <li>Normal: The quick brown fox jumps over the lazy dog.</li>
  <li>Bold: <b>The quick brown fox jumps over the lazy dog.</b></li>
  <li>Italic: <i>The quick brown fox jumps over the lazy dog.</i></li>
  <li>Bold Italic: <b><i>The quick brown fox jumps over the lazy dog.</i></b></li>
</ul>

<p><code>.ea-font-compact</code>: A secondary font for supporting text.
    Some examples:</p>
<ul class="ea-font-compact">
  <li>Normal: The quick brown fox jumps over the lazy dog.</li>
  <li>Bold: <b>The quick brown fox jumps over the lazy dog.</b></li>
  <li>Italic: <i>The quick brown fox jumps over the lazy dog.</i></li>
  <li>Bold Italic: <b><i>The quick brown fox jumps over the lazy dog.</i></b></li>
</ul>

<p><code>.ea-font-nav</code>: Use in navigational (clickable) titles:</p>
<h3 class="ea-font-nav">A navigational title</h3>

<p><code>.ea-font-title</code>: Use in page titles:</p>
<h2 class="ea-font-title">A page title</h2>

<p><code>.ea-font-subtitle</code>: Use in subtitles:</p>
<h2 class="ea-font-subtitle">A secondary title</h2>

All elements of the website should fit into one of these color cabinets. The classes follow the naming convention:

.ea-color-[background-color-name]

Each color cabinet also has a link color class that fits the background, they have the following naming convention:

.ea-color-link-[background-color-name]

Note: color cabinets are nestable, however link color cabinets are not. The highest declared class will have specificity precedence.

p.ea-color-white.ea-color-link-white

White background, dark grey text, blue links, dark grey emphasis text.


p.ea-color-white-low.ea-color-link-white-low

White background, medium grey text, blue links, blue emphasis text.


p.ea-color-white-high.ea-color-link-white-high

White background, black text, dark blue links, dark blue emphasis text.


p.ea-color-grey.ea-color-link-grey

Grey background, dark grey text, blue links, black emphasis text.


p.ea-color-blue.ea-color-link-blue

Blue background, light blue text, white links that go yellow on hover, blue emphasis text.


p.ea-color-darkblue.ea-color-link-darkblue

Dark blue background, light blue text, white links that go yellow on hover, yellow emphasis text.


p.ea-color-yellow.ea-color-link-yellow

Yellow background, dark grey text, dark blue links, bright blue emphasis text.


p.ea-color-lightorange.ea-color-link-lightorange

Light orange background, white text, white links with a blue background on hover, white emphasis text.


p.ea-color-orange.ea-color-link-orange

Orange background, white text, white links with a blue background on hover, White emphasis text.


<p><code>p.ea-color-white.ea-color-link-white</code></p>
<p class="ea-color-white ea-color-link-white"> White background, dark grey text,
    <a href="#">blue links</a>, <b>dark grey emphasis text</b>.</p>
<br>

<p><code>p.ea-color-white-low.ea-color-link-white-low</code></p>
<p class="ea-color-white-low ea-color-link-white-low">White background, medium
    grey text, <a href="#">blue links</a>, <b>blue emphasis text</b>.</p>
<br>

<p><code>p.ea-color-white-high.ea-color-link-white-high</code></p>
<p class="ea-color-white-high ea-color-link-white-high"> White background, black
    text, <a href="#">dark blue links</a>, <b>dark blue emphasis text</b>.</p>
<br>

<p><code>p.ea-color-grey.ea-color-link-grey</code></p>
<p class="ea-color-grey ea-color-link-grey">Grey background, dark grey text,
    <a href="#">blue links</a>, <b>black emphasis text</b>.</p>
<br>

<p><code>p.ea-color-blue.ea-color-link-blue</code></p>
<p class="ea-color-blue ea-color-link-blue"> Blue background, light blue text,
    <a href="#">white links that go yellow on hover</a>, <b>blue emphasis
    text</b>.</p><br>

<p><code>p.ea-color-darkblue.ea-color-link-darkblue</code></p>
<p class="ea-color-darkblue ea-color-link-darkblue">Dark blue background, light
    blue text, <a href="#">white links that go yellow on hover</a>, <b>yellow
    emphasis text</b>.</p>
<br>

<p><code>p.ea-color-yellow.ea-color-link-yellow</code></p>
<p class="ea-color-yellow ea-color-link-yellow">Yellow background, dark grey
    text, <a href="#">dark blue links</a>, <b>bright blue emphasis text</b>.</p>
<br>

<p><code>p.ea-color-lightorange.ea-color-link-lightorange</code></p>
<p class="ea-color-lightorange ea-color-link-lightorange"> Light orange
    background, white text, <a href="#">white links with a blue background on
    hover</a>, <b>white emphasis text</b>.</p>
<br>

<p><code>p.ea-color-orange.ea-color-link-orange</code></p>
<p class="ea-color-orange ea-color-link-orange">Orange background, white text,
    <a href="#">white links with a blue background on hover</a>, <b>White
    emphasis text</b>.</p>
<br>

Important Note: the logic for painting the network related elements (map, drop menu, linked flags) are too complex for this style guide and are covered in a separate set of resources within the EA Map API.

The elements that can roughly be considered "global" are the headers, footers main navigational menu. Expected markup:

header
    nav#ea-branding-nav-meta.navbar
        div.container
           ul#ea-network-list.nav.navbar-nav.navbar-right
              li.dropdown
                  a.dropdown-toggle data-toggle="dropdown"
                  ul.dropdown-menu
            div.navbar-header
                button.navbar-toggle.collapse                                   // the twitter navbar button boilerplate
                p.navbar-text.hidden-xs                                         // site slogan
            div#ea-navbar-top-collapse.collapse.navbar-collapse
                ul.nav.navbar-nav.navbar-right
                    li.hidden-sm                                                // collection of social media links
                    li...                                                       // login, register, newsletter links
    div#ea-branding-identity
        div.container
            div.row
                div#ea-branding-logo.text-center.col-xs-12.col-sm-4.col-md-3 col-lg-3
                    a.navbar-btn.pull-left                                      // logo wrapper
                        img                                                     // logo image
                        span                                                    // tld (eg, .com, .fr)
                div#ea-branding-map.hidden-xs.col-sm-8.col-md-3.col-lg-3
                div#ea-branding-map-rss.hidden-xs.hidden-sm.col-md-6.col-lg-6
    nav#ea-branding-nav-main
        div.container
            table cellspacing="0
                tr
                    td a i.fa.fa-lg.fa-home                                     // first link must be home link
                    td                                                          // this is to link to a submenu
                        a href=#submenuId data-toggle=collapse
                            i.fa.fa-angle-double-down
                    td a ...                                                    // as many links as you like
                    td                                                          // second to last link must be more btn
                        a href="#ea-navbar-main-more-submenu"
                            i.fa.fa-angle-double-down
                    td align="right"                                            // last must be search form
                        form
                            input
                            button
                                i.fa.fa-lg.fa-search
            div#ea-navbar-main-more-submenu.collapse                            // content dynamically created
            div#submenuId.collapse                                              // any additional submenus


section.ea-color-grey                                                           // just a space holder for content
    div.container-fluid
        article.ea-color-white


footer
    nav#ea-branding-socail                                                      // social media links
        h4
        ul
            li a.fa.fa-lg.fa-facebook                                           // the links
    nav#ea-branding-flags                                                       // network flags links
        div.container
            div.row
                div#network-flags-title.col-lg-1.hidden-md.hidden-sm.
				            h4 EurActiv Network
			          div#network-flags-core.col-lg-3.col-md-3.col-sm-6
			          div#network-flags-network.col-lg-3.col-md-3.col-sm-6
			          div#network-flags-associated.col-lg-5.col-md-6.col-sm-12
    nav#ea-branding-nav-corporate                                               // corporate page navigation
        div.container
            div.row
                div.col-*                                                       // repeat as necessary
                    h4
                    ul
                        li a                                                    // repeat as necessary
                        

    div#ea-branding-copyright                                                   // copyright notice
        p

Dummy Content

This is some dummy content to make the sidebar look right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

<script src="//assets.euractiv.com/eamap/v1/eamap-min.js"></script>
<header>

    <!-- meta navigation (blue menu at page top) -->
    <nav id="ea-branding-nav-meta" class="navbar"> 
        <div class="container-fluid">

            <!-- the target for the network links -->
            <ul class="nav navbar-nav navbar-right" id="ea-network-list">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        EurActiv 12 Languages <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu"><li></li></ul>
                </li>
            </ul>

            <!-- slogan and mobile expand/collapse button -->
            <div class="navbar-header">
                <button
                    type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#ea-navbar-top-collapse"
                ><i class="fa fa-bars"></i></button>
                <p class="navbar-text hidden-xs">Site Slogan</p>
            </div><!-- /.navbar-header -->

            <!-- social and login -->
            <div class="collapse navbar-collapse" id="ea-navbar-top-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden-sm">
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-twitter"></a>
                        <a href="#" class="fa fa-linkedin"></a>
                        <a href="#" class="fa fa-google-plus"></a>
                        <a href="#" class="fa fa-youtube-play"></a>
                        <a href="#" class="fa fa-rss"></a>
                    </li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Newsletters</a></li>
                </ul>
            </div>
        </div><!-- /.container -->
    </nav><!-- /.#ea-navbar-top.navbar -->

    <!-- Identity branding (logo, network map, network feeds) -->
    <div id="ea-branding-identity">
        <div class="container-fluid">
            <div class="row">
                <div id="ea-branding-logo" class="text-center col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <a href="#" class="navbar-btn pull-left">
                        <img src="http://assets.euractiv.com/logos/logo.png" alt="Logo">
                        <span>.com</span>
                    </a>
                </div>
                <div id="ea-branding-map" class="hidden-xs col-sm-8 col-md-3 col-lg-3"></div>
                <div id="ea-branding-map-rss" class="hidden-xs hidden-sm col-md-6 col-lg-6"></div>
            </div>
        </div>
    </div>


    <!-- primary site navigation -->
    <nav id="ea-branding-nav-main">
        <div class="container-fluid">
            <!-- Developer note: yes, tables are bad. This menu is kind of
                 problematic for many reasons.  The previous iteration of this
                 menu worked using exculsively CSS+JS, based on the bootstrap
                 navbar. It was fragile and I could not get it to work reliably.
                 This gets it to behave reliably for the most users. -->
            <table><tr>
                <td><a href="#"><i class="fa fa-lg fa-home"></i></a></td>
                <td><a href="#mainSubmenuOne" data-toggle="collapse">
                      Submenu 1
                      <i class="fa fa-angle-double-down"></i>
                </a></td>
                <td><a href="#">Item 1</a></td>
                <td><a href="#">Item 2</a></td>
                <td><a href="#mainSubmenuTwo" data-toggle="collapse">
                    Submenu 2
                    <i class="fa fa-angle-double-down"></i>
                </a></td>
                <td><a href="#">Item 3</a></td>
                <td><a href="#">Item 4</a></td>
                <td><a href="#">Item 5</a></td>
                <td><a href="#">Item 6</a></td>
                <td><a href="#">Item 7</a></td>
                <td><a href="#">Item 8</a></td>
                <td><a href="#">Item 9</a></td>
                <td><a href="#">Item 10</a></td>
                <td><a href="#">Item 11</a></td>
                <td><a href="#">Item 12</a></td>
                <td><a href="#">Item 13</a></td>
                <td><a href="#ea-navbar-main-more-submenu" data-toggle="collapse">
                    More <i class="fa fa-angle-double-down"></i>
                </a></td>
                <td><form>
                    <input type="text" placeholder="Search"
                    ><button type="submit">
                        <i class="fa fa-lg fa-search"></i>
                    </button>
                </form></td>
            </tr></table>
            <div id="ea-navbar-main-more-submenu" class="ea-navbar-main-more-submenu collapse"></div>
            <div id="mainSubmenuOne" class="collapse">
                <div>This is a submenu.  It can contain any markup, including
                    <a href="#">links, naturally</a>.</div>
            </div>
            <div id="mainSubmenuTwo" class="collapse">
                <div><p>Another submenu, with a paragraph.</p></div>
            </div>
        </div>
    </nav>
</header>

<!-- just a space holder for content -->
<section class="ea-color-grey">
    <div class="container-fluid ea-color-white">
        <div class="row">
            <div class="col-xs-12">
                <ul class="ea-nav nav nav-tabs">
                    <li><a href="#">Item</a></li>
                    <li class="active"><a href="#">Active item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <article class="col-md-8">
              <h2 class="ea-font-title ea-color-white-high" style="margin-top:0"
              >Dummy Content</h2>
              <p>This is some dummy content to make the sidebar look right</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                erat. Phasellus pharetra velit dolor, id molestie quam fringilla
                a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
                sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
                scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
                aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
                Donec diam leo, consectetur eget sodales in, aliquet eget ex.
                Praesent nec pretium lectus. Donec libero felis, mattis sit amet
                sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
                malesuada, ante eros pellentesque massa, fermentum dictum nibh
                quam ut dui.</p>
            </article>
            <div class="col-md-4">
                <ul class="ea-nav nav nav-pills nav-stacked">
                    <li><a href="#">Item</a></li>
                    <li class="active"><a href="#">Active item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
    </div>
</section>


<footer>

    <!-- social media links -->
    <nav id="ea-branding-social">
        <h4>Follow us:</h4>
        <ul>
            <li><a href="#" class="fa fa-lg fa-facebook"></a></li>
            <li><a href="#" class="fa fa-lg fa-twitter"></a></li>
            <li><a href="#" class="fa fa-lg fa-linkedin"></a></li>
            <li><a href="#" class="fa fa-lg fa-google-plus"></a></li>
            <li><a href="#" class="fa fa-lg fa-youtube-play"></a></li>
            <li><a href="#" class="fa fa-lg fa-rss"></a></li>
        </ul>
    </nav>

    <!-- network flags links -->
    <nav id="ea-branding-flags">
        <div class="container-fluid">
	          <div class="row">
                <div id="network-flags-title" class="col-lg-1 hidden-md hidden-sm">
				            <h4>EurActiv Network</h4>
			          </div>
			          <div id="network-flags-core" class="col-lg-3 col-md-3 col-sm-6"></div>
			          <div id="network-flags-network" class="col-lg-3 col-md-3 col-sm-6"></div>
			          <div id="network-flags-associated" class="col-lg-5 col-md-6 col-sm-12"></div>
		        </div>
        </div>
    </nav>

    <!-- corporate page navigation -->
    <nav id="ea-branding-nav-corporate">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <h4>Item Grouping</h4>
                    <ul>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h4>Item Grouping</h4>
                    <ul>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">...</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- copyright notice -->
    <div id="ea-branding-copyright">
        <p>Efficacité et Transparence des Acteurs Européens © 1999-2015
            <a href="#">EurActiv.com PLC</a> | <a href="#">Terms and
            Conditions</a></p>
    </div>

</footer>

The section menu relies on the EA Sections API to function properly.

Expected markup for a section header:

h1.ea-section-banner-[section_name]

Expected markup for a section menu:

div.ea-sectionmenu.ea-section-icons-[blue-yellow]
    div.ea-sectionmenu-main#[main_sections_menu_id]
        ul
            li
              a.ea-section-icon-[section_name]
        a.ea-sectionsmenu-more href="#[secondary_sections_menu_id]"
    div.ea-sectionmenu-secondary#[secondary_sections_menu_id]
        ul
            li
              a
        a.ea-sectionsmenu-return href="#[main_sections_menu_id]"

Agriculture & Food 

<link href="//assets.euractiv.com/easections/v-edge/easections-min.css" rel="stylesheet" property="stylesheet">


<h1 class="ea-section-banner-agriculture-food">
      Agriculture &amp; Food
</h1>

<div class="ea-sectionmenu ea-section-icons-blue" id="sectionmenu-example">
    <div id="sectionMenu-main" class="ea-sectionmenu-main">
         <ul></ul>
         <a href="#sectionMenu-secondary" class="ea-sectionsmenu-more">
             More Sections <i class="fa fa-angle-right"></i>
         </a>
    </div>
    <div id="sectionMenu-secondary" class="ea-sectionmenu-secondary">
        <ul>
              <li><a href="#">Lorem Ipsum</a></li>
        </ul>
        <a href="#sectionMenu-main" class="ea-sectionmenu-return">
            <i class="fa fa-angle-left"></i> Main Sections
        </a>
    </div>
</div>

<script>(function () {

    $.ajax({
        url: "//assets.euractiv.com/easections/api.php",
        jsonp: "callback",
        dataType: "jsonp",
        success: function( response ) {
            var prop, bm, ul, li, ym;

            bm = $('#sectionmenu-example');
            bm.removeAttr('id');
            ul = bm.find('ul').first();

            for (prop in response) {
                if (response.hasOwnProperty(prop)) {
                     ul.append('<li><a href="#" class="ea-section-icon-'
                                + response[prop]['class_suffix']
                                + '">' + response[prop]['section_name']
                                + '</a></li>');
                }
            }
            ul = bm.find('ul').last();
            li = ul.find('li').first();
            for (prop = 0; prop < 15; prop += 1) {
                ul.append(li.clone());
            }
            ym = bm.clone(true);
            ym.removeClass('ea-section-icons-blue').addClass('ea-section-icons-yellow-alt');
            bm.after(ym);
        }
    });

}());</script>

Important note: the teaser cards can cause a lot of images to be loaded, which impacts performance significantly, especially on mobile. See the Lazy Load API for a solution to keep page size down and load faster.

Teasers are the cards that we use to show links to articles. Expected Markup:

div.container
    div.row
        div.col-*
            div.ea-teaser[.ea-teaser-no-collapse]  // by default, teasers will collapse to an abbreviated version on phone screens. The
                div.ea-teaser-labels               //     optional .ea-teaser-no-collapse class prevents this
                    a                              // links get light orange background
                    span                           // span get orange background
                a                                  // link to article
                    span
                        img
                div.ea-teaser-meta
                    a                               // the article's section
                    span.ea-timestamp               // see "Utilities" section for timestamp
                        i.fa.fa-calendar
                div.ea-teaser-caption               // note: height can be set in css or using the
                    h3                              //        data-height attribute. Default is 295px
                        a                           // Link to article, contains article title
                div.ea-teaser-abstract              // optional abstract. can contain pretty much any HTML
Content Type Promoted
teaser
Article Section 14-10-2015

Article Title Lorem Ipsum Dolor Si Amet

An caption has a maximum of 295px. This is some long text to demonstrate what happens if the abstract goes over the allowed height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

Content Type Promoted
teaser
Article Section 14-10-2015

Article Title Lorem Ipsum Dolor Si Amet

Shorter abstracts should still line up. Note that the content of this div and be markup or just text.
Content Type Promoted
teaser
Article Section 14-10-2015

Abstracts are optional.

Content Type Promoted
teaser
Article Section 14-10-2015

Note the optional data-height attribute.

Content Type Promoted
teaser
Article Section 14-10-2015

Note height set in style attribute.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="ea-teaser ea-teaser-no-collapse">
      <div class="ea-teaser-labels">
        <a href="#">Content Type</a>
        <span>Promoted</span>
      </div>
      <a href="#">
          <span>
              <img src="placeholder.png" alt="teaser">
          </span>
      </a>
      <div class="ea-teaser-meta">
        <a href="#">Article Section</a>
        <span class="ea-timestamp" data-timestamp="1444813947">
            <i class="fa fa-calendar"></i>
            14-10-2015
        </span>
      </div>
      <div class="ea-teaser-caption">
        <h3><a href="#">Article Title Lorem Ipsum Dolor Si Amet</a></h3>
        <div class="ea-teaser-abstract">
          <p>An caption has a maximum of 295px. This is some long text to
            demonstrate what happens if the abstract goes over the allowed
            height.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
            euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
            nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
            erat. Phasellus pharetra velit dolor, id molestie quam fringilla
            a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
            sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
            scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
            aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
            Donec diam leo, consectetur eget sodales in, aliquet eget ex.
            Praesent nec pretium lectus. Donec libero felis, mattis sit amet
            sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
            malesuada, ante eros pellentesque massa, fermentum dictum nibh
            quam ut dui.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="ea-teaser">
      <div class="ea-teaser-labels">
        <a href="#">Content Type</a>
        <span>Promoted</span>
      </div>
      <a href="#">
          <span>
              <img src="placeholder.png" alt="teaser">
          </span>
      </a>
      <div class="ea-teaser-meta">
        <a href="#">Article Section</a>
        <span class="ea-timestamp" data-timestamp="1444813947">
            <i class="fa fa-calendar"></i>
            14-10-2015
        </span>
      </div>
      <div class="ea-teaser-caption">
        <h3><a href="#">Article Title Lorem Ipsum Dolor Si Amet</a></h3>
        <div class="ea-teaser-abstract">Shorter abstracts should still line
            up. Note that the content of this div and be markup or just
            text.</div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="ea-teaser">
      <div class="ea-teaser-labels">
        <a href="#">Content Type</a>
        <span>Promoted</span>
      </div>
      <a href="#">
          <span>
              <img src="placeholder.png" alt="teaser">
          </span>
      </a>
      <div class="ea-teaser-meta">
        <a href="#">Article Section</a>
        <span class="ea-timestamp" data-timestamp="1444813947">
            <i class="fa fa-calendar"></i>
            14-10-2015
        </span>
      </div>
      <div class="ea-teaser-caption" data-height="125">
        <h3><a href="#">Abstracts are optional.</a></h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="ea-teaser">
      <div class="ea-teaser-labels">
        <a href="#">Content Type</a>
        <span>Promoted</span>
      </div>
      <a href="#">
          <span>
              <img src="placeholder.png" alt="teaser">
          </span>
      </a>
      <div class="ea-teaser-meta">
        <a href="#">Article Section</a>
        <span class="ea-timestamp" data-timestamp="1444813947">
            <i class="fa fa-calendar"></i>
            14-10-2015
        </span>
      </div>
      <div class="ea-teaser-caption" data-height="125">
        <h3><a href="#">Note the optional data-height attribute.</a></h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="ea-teaser">
      <div class="ea-teaser-labels">
        <a href="#">Content Type</a>
        <span>Promoted</span>
      </div>
      <a href="#">
          <span>
              <img src="placeholder.png" alt="teaser">
          </span>
      </a>
      <div class="ea-teaser-meta">
        <a href="#">Article Section</a>
        <span class="ea-timestamp" data-timestamp="1444813947">
            <i class="fa fa-calendar"></i>
            14-10-2015
        </span>
      </div>
      <div class="ea-teaser-caption" style="height:125px">
        <h3><a href="#">Note height set in style attribute.</a></h3>
      </div>
    </div>
  </div>
</div>

Important note: the teaser cards can cause a lot of images to be loaded, which impacts performance significantly, especially on mobile. See the Lazy Load API for a solution to keep page size down and load faster.

Rotator teaser cards or Featured Article teaser cards. Expected Markup:

div.row
    div.col-*.ea-rotator-[num]                   // should be number of items in rotator, 1 to 8
        div.ea-rotator[.ea-rotator-no-collapse]  // by default, rotator cards will collapse to an abbreviated version on phone screens. The
            div.ea-rotator-labels                //     optional .ea-rotator-no-collapse class prevents this
                a                                           // content type
                span                                        // promoted
            a
                span
                    img
            div.ea-rotator-caption
                h1, h2, h3                                  // article title
                    a
                p                                           // article meta
                    a                                       // section link
                    span.ea-timestamp                       // timestamp

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="ea-rotator ea-rotator-no-collapse">
            <div class="ea-rotator-labels">
              <a href="#">Content Type</a>
              <span>Promoted</span>
            </div>
            <a href="#">
                <span>
                    <img src="placeholder.png" alt="teaser">
                </span>
            </a>
            <div class="ea-rotator-caption">
                <h3><a href="#">Article title.</a></h3>
                <p>
                    <a href="#">Article Section</a>
                    <span class="ea-timestamp" data-timestamp="1444813947">
                        <i class="fa fa-calendar"></i>
                        14-10-2015
                    </span>
                </p>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="ea-rotator">
            <div class="ea-rotator-labels">
              <a href="#">Content Type</a>
              <span>Promoted</span>
            </div>
            <a href="#">
                <span>
                    <img src="placeholder.png" alt="teaser">
                </span>
            </a>
            <div class="ea-rotator-caption">
                <h3><a href="#">Article title.</a></h3>
                <p>
                    <span class="ea-timestamp" data-timestamp="1444813947">
                        <i class="fa fa-calendar"></i>
                        14-10-2015
                    </span>
                    <a href="#">Article Section</a>
                </p>
            </div>
        </div>
    </div>
</div>

These stripes represent different regions on the website. All non-primary content should go in one of these. In other words, they are the wrappers for widgets.

Expected markup for stripes:

div.container
    section.row.ea-stripe[-color]      // optionally, [-color] can be one of: white, yellow-bar, blue, darkblue, yellow
        aside.col-*                    // must be wrapped in a column; repeat them as you see fit
            aside                     // an optional wrapper if widgetizing
                h2.ea-block-title  // or .ea-line-title or .ea-block-title-left or .ea-line-title-left 
                    span|a
                div|p|...          // any block level tag

Expected markup for sidebars:

div.container
    section                            // optional, but good semantics
        article.col-*                  // can be div, article is better semantics
        div.col-*.ea-sidebar
            aside                      // optional, but widgets usually need a wrapper
                h2.ea-line-title       // same title classes apply as in stripes (.ea-block-title...)
                    span|a
                div|p|...              // any block level tag
This is a simple placeholder to demonstrate how these sections line up to the default bootstrap grid layout. Layout note: The elements below expand beyound the boundaries of the example space due to nesting .container elements, which you can't actually do in bootstrap. It is an artifact of the demo page and they line up properly when used in an actual web page.

Color applied at stripe level


Color applied at block level

Sidebars

Dummy Content

This is some dummy content to make the sidebar look right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

Line Title

A standard line title. It's blue by default.

Menus in the sidebar are styled. The containing UL should have the bootstrap classes nav nav-pills nav-stacked:

<style type="text/css" scoped>
    #example-stripes .row > aside {
        min-height: 250px;
    }
</style>

<div class="container" id="example-stripes">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg-info">
            This is a simple placeholder to demonstrate how these sections line
            up to the default bootstrap grid layout. <b>Layout note:</b> The
            elements below expand beyound the boundaries of the example space
            due to nesting <code>.container</code> elements, which you can't
            actually do in bootstrap.  It is an artifact of the demo page and
            they line up properly when used in an actual web page.
        </div>
    </div>
    <br>
    <h2 class="text-center">Color applied at stripe level</h2>
    <section class="row ea-stripe-darkblue">
        <aside class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2 class="ea-line-title"><a href="#">Line Title</a></h2>
            <p>This is the full-stripe markup with the coloring
                applied at the stripe level instead of the widget level. It
                uses <code>.ea-stripe-darkblue</code>.</p>
            <p>Also note that the block title uses a link (A) instead of as SPAN
                without changing the look of the title.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
    </section>
    <section class="row ea-stripe-grey">
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-line-title"><a href="#">Line title</a></h2>
            <p>This is a grey stripe (<code>.ea-stripe-grey</code>).</p>
            <p>In this block, the title has been styled with
                <code>.ea-line-title-left</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-block-title"><a href="#">Block Title</a></h2>
            <p>In this block, the title has been aligned left with
                <code>.ea-line-title-left</code>.</p>
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-subtile-title"><a href="#">Subtile title</a></h2>
            <p>In this block has a subtile title, <code>.ea-subtile-title</code>.</p>
        </aside>
    </section>
    <section class="row ea-stripe-white">
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-line-title-left"><a href="#">Line title left</a></h2>
            <p>This is a white stripe (<code>.ea-stripe-white</code>).</p>
            <p>In this block, the title has been aligned left with
                <code>.ea-line-title-left</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-block-title-left"><a href="#">Block Title left</a></h2>
            <p>In this block, the title has been aligned left with
                <code>.ea-line-title-left</code>.</p>
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-subtile-title-left"><a href="#">Subtile title left</a></h2>
            <p>In this block, the title has been aligned left with
                <code>.ea-subtile-title-left</code>.</p>
        </aside>
    </section>
    <section class="row ea-stripe-yellow-bar">
        <aside class="col-sm-8">
            <h2 class="ea-block-title-left"><span>Block Title Left</span></h2>
            <p>This is an example of a <code>.ea-stripe-yellow-bar</code> stripe.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="col-sm-4">
            <aside class="ea-color-white">
                <h2 class="ea-block-title"><span>Block Title</span></h2>
                <p>This is an example of the block title wrapped in a nested
                    <code>aside</code> container, which does not throw off
                    alignment and is important for widgitizing the content of
                    the stripes.</p>
                <p>It will also allow you to have a different "inner color" in
                    a widget</p>
            </aside>
        </aside>            
    </section>
    <section class="ea-stripe-nocolor row">
        <aside class="col-xs-12">
            <h2 class="ea-line-title"><span>Line Title</span></h2>
            <p>This is an example of a stripe that does not have any
                colors applied.  For reference, it uses the
                <code>.ea-stripe-nocolor</code> class, but you can use any
                class that starts with "ea-stripe-".</p>
        </aside>
    </section>

    <hr><br>
    <h2 class="text-center">Color applied at block level</h2>

    <section class="row ea-stripe">
        <aside class="ea-stripe-widget-white col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h1 class="ea-line-title"><span>Headline 1 (h1)</span></h1>
            <p>This is an example of <code>.ea-stripe-widget-white</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="ea-stripe-widget-yellow col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h2 class="ea-line-title"><span>Headline 2 (h2)</span></h2>
            <p>This is an example of <code>.ea-stripe-widget-yellow</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="ea-stripe-widget-blue col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h3 class="ea-line-title"><span>Headline 3 (h3)</span></h3>
            <p>This is an example of <code>.ea-stripe-widget-blue</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="ea-stripe-widget-darkblue col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h4 class="ea-line-title"><span>Headline 4 (h4)</span></h4>
            <p>This is an example of <code>.ea-stripe-widget-darkblue</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="ea-stripe-widget-grey col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <h5 class="ea-line-title"><span>Headline 5 (h5)</span></h5>
            <p>This is an example of <code>.ea-stripe-widget-grey</code>.</p>
            <p><a href="#">This is a link</a></p>
        </aside>
        <aside class="ea-stripe-widget-blue col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <aside class="ea-color-white">
                <h6 class="ea-line-title"><span>Headline 6 (h6)</span></h6>
                <p>You may need to have a different background color for the
                    inner part of the text. In this case you can simply wrap
                    another <code>aside</code> with the appropriate color class.</p>
            </aside>
        </aside>
    </section>

    <hr>
    <h2 class="text-center">Sidebars</h2>
    <section>
        <div class="row">
            <article class="col-md-8">
              <h2 class="ea-font-title ea-color-white-high" style="margin-top:0"
              >Dummy Content</h2>
              <p>This is some dummy content to make the sidebar look right</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                erat. Phasellus pharetra velit dolor, id molestie quam fringilla
                a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
                sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
                scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
                aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
                Donec diam leo, consectetur eget sodales in, aliquet eget ex.
                Praesent nec pretium lectus. Donec libero felis, mattis sit amet
                sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
                malesuada, ante eros pellentesque massa, fermentum dictum nibh
                quam ut dui.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                erat. Phasellus pharetra velit dolor, id molestie quam fringilla
                a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
                sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
                scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
                aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
                Donec diam leo, consectetur eget sodales in, aliquet eget ex.
                Praesent nec pretium lectus. Donec libero felis, mattis sit amet
                sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
                malesuada, ante eros pellentesque massa, fermentum dictum nibh
                quam ut dui.</p>
            </article>
            <div class="col-md-4 ea-sidebar">
                <h2 class="ea-line-title"><span>Line Title</span></h2>
                <p>A standard line title. It's blue by default.</p>
                <aside style="outline:1px dotted #ccc">
                    <h2 class="ea-block-title"><span>Block Title</span></h2>
                    <p>Of course, your widgets will need to be bundled in a
                        wrapper, use <code>aside</code>.</p>
                </aside>
                <aside style="outline:1px dotted #ccc">
                    <h2 class="ea-line-title ea-line-title-yellow"><span>Yellow Line Title</span></h2>
                    <p>You can explicitly change the title to yellow by giving
                        it the class <code>.ea-line-title-yellow</code>.
                </aside>
                <aside style="outline:1px dotted #ccc">
                    <h2 class="ea-block-title ea-block-title-yellow"><span>Yellow Block Title</span></h2>
                    <p>Yellow block titles are also possible with the class
                        <code>.ea-block-title-yellow</code>.</p>
                </aside>
                <p>Menus in the sidebar are styled. The containing UL should
                    have the bootstrap classes <code>nav nav-pills nav-stacked</code>:</p>
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">Item</a></li>
                    <li class="active"><a href="#">Active item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>

Full stripe widgets

Note: for the purpose of this example, the widgets have had their height set to 400px for sm-plus sizes. Your client application will have to set the height and the conditions for the size. The relevant CSS rules are:

<style type='text/css' scoped>
    @media screen and (min-width: 768px) {
      .ea-widget-avatar > div,
      .ea-widget-avatar > ul,
      .ea-widget-listing > div,
      .ea-widget-listing > ul,
      .ea-widget-media > div,
      .ea-widget-media > ul,
      .ea-widget-block-advertising > div,
      .ea-widget-block-advertising > ul,
      .ea-widget-simple-list > div,
      .ea-widget-simple-list > ul {
        height: 400px;
      }
    }
</style>

Teasers:


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-teasers.col-xs-12
            h2.ea-line-title                                                    // or any of the other title classes
               a|span
            div.ea-widget-teasers-item.col-xs-12.col-sm-6.col-md-4.col-lg-3     // repeat this block a multiple of 4 times
                div.ea-widget-teasers-labels                                    // optional
                    a|span
                a
                    span
                        img
                div.ea-widget-teasers-meta                                      // optional
                    a
                    span.ea-timestamp
                div.ea-widget-teasers-caption
                    h3
                        a
                    div                                                         // Text abstract wrapper. Optional.

Full stripe advertising


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-fullstripe-advertising.col-xs-12
            h2.ea-subtile-title
                a|span
            div                                                                 // ad wrapper

Block level widgets

Normal listing: Thumbnail, title and summary.


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-listing.col-xs-12.col-sm-6.col-md-4
            h2.ea-line-title                                                    // or any of the other title classes
                a|span
            ul
                li                                                              // Repeat 4 times.
                    span                                                        // Promoted label. Optional.
                    a                                                           // Thumbnail wrapper
                        img                                                     // Thumbnail
                    div
                        h3
                            a
                        p                                                       // Summary/abstract. Optional.

Avatar widget


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-avatar.col-xs-12.col-sm-6.col-md-4
            h2.ea-line-title                                                    // or any of the other title classes
                a|span
            ul
                li                                                              // Repeat 4 times.
                    span                                                        // Promoted label. Optional.
                    a                                                           // Thumbnail wrapper
                        span
                            img                                                 // Thumbnail
                    h3
                        a

Media widget: one featured item and a couple of other items.


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-media.col-xs-12.col-sm-6.col-md-4
            h2.ea-line-title                                                    // or any of the other title classes
                a|span
            div
                div.ea-widget-media-featured
                    div.ea-widget-media-labels                                  // Section link and promoted tag. Optional.
                        a|span
                    a                                                           // thumbnail wrapper
                        span
                            img                                                 // thumbnail
                    div.ea-widget-media-meta                                    // Featured metadata. Optional.
                        a
                        span.ea-timestamp
                    h3                                                          // featured title
                        a
                ul                                                              // more items
                    li                                                          // Repeat up to 3.
                        a

Block advertising widget.


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-media.col-xs-12.col-sm-6.col-md-4
            h2.ea-subtile-title
                a|span
            div                                                                 // ad wrapper

Simple listing widget.


.container
    section.row.ea-stripe                                                       // or .row.ea-stripe-[color]
        div.ea-widget-simple-list.col-xs-12.col-sm-6.col-md-4
            h2.ea-line-title                                                    // or any of the other title classes
                a|span
            ul
                li                                                              // repeat as needed
                    a
This is a simple placeholder to demonstrate how these sections line up to the default bootstrap grid layout. Layout note: The elements below expand beyound the boundaries of the example space due to nesting .container elements, which you can't actually do in bootstrap. It is an artifact of the demo page and they line up properly when used in an actual web page.

Click to change stripe color

<div class="container">
    <style type='text/css' scoped>
    @media screen and (min-width: 768px) {
      .ea-widget-avatar > div,
      .ea-widget-avatar > ul,
      .ea-widget-listing > div,
      .ea-widget-listing > ul,
      .ea-widget-media > div,
      .ea-widget-media > ul,
      .ea-widget-block-advertising > div,
      .ea-widget-block-advertising > ul,
      .ea-widget-simple-list > div,
      .ea-widget-simple-list > ul {
        height: 400px;
      }
    }
    </style>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 bg-info">
            This is a simple placeholder to demonstrate how these sections line
            up to the default bootstrap grid layout. <b>Layout note:</b> The
            elements below expand beyound the boundaries of the example space
            due to nesting <code>.container</code> elements, which you can't
            actually do in bootstrap.  It is an artifact of the demo page and
            they line up properly when used in an actual web page.
        </div>
    </div>
    <br>

    <p class="text-center"><a href="#" id="ea-widget-rotate"
        class="btn btn-danger btn-block">Click to change stripe color</a></p>

    <section class="row ea-stripe" id="ea-widget-rotate-me">
        <aside class="ea-widget-teasers col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2 class="ea-line-title"><a href="#">Full stripe list</a></h2>
            <div class="ea-widget-teasers-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="ea-widget-teasers-labels">
                    <a href="#">Content Type</a>
                    <span>Promoted</span>
                </div>
                <a href="#">
                    <span>
                        <img src="placeholder.png" alt="teaser">
                    </span>
                </a>
                <div class="ea-widget-teasers-meta">
                    <a href="#">Article Section</a>
                    <span class="ea-timestamp" data-timestamp="1444813947">
                        <i class="fa fa-calendar"></i>
                        14-10-2015
                    </span>
                </div>
                <div class="ea-widget-teasers-caption" style="height:125px">
                    <h3><a href="#">Lorem Ipsum</a></h3>
                    <div>Lorem ipsum dolor si amet, consectetur adipiscing elit.
                        Fusce euismod orci purus, in imperdiet tellus malesuada
                        sit amet. Nam nec ultrices metus, vel rhoncus
                        lacus.</div>
                </div>
            </div>
        </aside>
        <aside class="ea-widget-advertising col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h2 class="ea-subtile-title"><a href="#">Advertising Stripe</a></h2>
            <div>
                <p>Advertising element goes here, like a DFP tag.</p>
            </div>
        </aside>
        <aside class="ea-widget-listing col-xs-12 col-sm-6 col-md-4">
            <h2 class="ea-line-title"><a href="#">List: normal</a></h2>
            <ul>
                <li>
                    <span>Promoted</span>
                    <a href="#"><img src="placeholder.png" alt="teaser"></a>
                    <div>
                        <h3><a href="#">Cras sit amet nibh libero, in gravida
                            nulla.</a></h3>
                        <p>Nulla vel metus scelerisque ante sollicitudin commodo.
                            Cras purus odio, vestibulum in vulputate at, tempus
                            viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla. Donec lacinia congue felis
                            in faucibus.</p>
                    </div>
                </li>
            </ul>
        </aside>
        <aside class="ea-widget-avatar col-xs-12 col-sm-6 col-md-4">
            <h2 class="ea-line-title"><a href="#">Avatar listing</a></h2>
            <ul>
                <li>
                    <span>Promoted</span>
                    <a href="#"><span><img src="placeholder.png" alt="teaser"></span></a>
                    <h3><a href="#">Cras sit amet nibh libero, in gravida
                        nulla vel metus scelerisque ante sollicitudin
                        commodo.</a></h3>
                </li>
            </ul>
        </aside>
        <aside class="ea-widget-media col-xs-12 col-sm-6 col-md-4">
            <h2 class="ea-line-title"><a href="#">Media thumb</a></h2>
            <div>
                <div class="ea-widget-media-featured">
                    <div class="ea-widget-media-labels">
                        <a href="#">Content Type</a>
                        <span>Promoted</span>
                    </div>
                     <a href="#"><span><img src="placeholder.png" alt="teaser"></span></a>
                     <div class="ea-widget-media-meta">
                         <a href="#">Article Section</a>
                         <span class="ea-timestamp" data-timestamp="1444813947">
                             <i class="fa fa-calendar"></i>
                             14-10-2015
                         </span>
                     </div>
                     <h3><a href="#">Lorem ipsum dolor si amet, consectetur
                          adipiscing elit. Fusce euismod orci purus, in imperdiet
                          tellus malesuada sit amet. Nam nec ultrices metus, vel
                          rhoncus lacus.</a></h3>
                </div>
                <ul>
                    <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                        Fusce euismod orci purus, in imperdiet tellus malesuada
                        sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                    <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                        Fusce euismod orci purus, in imperdiet tellus malesuada
                        sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                    <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                        Fusce euismod orci purus, in imperdiet tellus malesuada
                        sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                </ul>
            </div>
        </aside>
        <aside class="ea-widget-block-advertising col-xs-12 col-sm-6 col-md-4">
            <h2 class="ea-subtile-title"><a href="#">Advertising Block</a></h2>
            <div>
                <p>Advertising element goes here, like a DFP tag.</p>
            </div>
        </aside>
        <aside class="ea-widget-simple-list col-xs-12 col-sm-6 col-md-4">
            <h2 class="ea-line-title"><a href="#">Simple Listing</a></h2>
            <ul>
                <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                    Fusce euismod orci purus, in imperdiet tellus malesuada
                    sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                    Fusce euismod orci purus, in imperdiet tellus malesuada
                    sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                <li><a href="#">Lorem ipsum dolor si amet, consectetur adipiscing elit.
                    Fusce euismod orci purus, in imperdiet tellus malesuada
                    sit amet. Nam nec ultrices metus, vel rhoncus lacus.</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
                <li><a href="#">Lorem ipsum dolor si amet</a></li>
            </ul>
        </aside>
    </section>
</div>

<script>(function () {
    'use strict';
    var current = 0,
        classes = ['white', 'yellow', 'blue', 'darkblue', 'yellow-bar', 'grey'],
        wrapper = $('#ea-widget-rotate-me'),
        rotate = function () {
            wrapper.children().removeClass('ea-stripe-widget-' + classes[current]);
            current += 1;
            if (!classes[current]) {
                current = 0;
            }
            wrapper.children().addClass('ea-stripe-widget-' + classes[current]);
        },
        interval = setInterval(rotate, 3000);
    $('#ea-widget-rotate').on('click', function (e) {
        e.preventDefault();
        clearInterval(interval);
        rotate();
    });

    var t = wrapper.find('.ea-widget-teasers-item');
    t.after(t.clone()).after(t.clone()).after(t.clone());
    t.find('h3 a').text('Lorem ipsum dolor si amet, consectetur adipiscing elit.');

    var t = wrapper.find('.ea-widget-listing li');
    t.after(t.clone()).after(t.clone());

    var t = wrapper.find('.ea-widget-avatar li');
    t.after(t.clone()).after(t.clone()).after(t.clone()).after(t.clone());
}());</script>

The accordion is pretty simple, used mainly on LinksDossiers. It has a couple of features:

  • Closed by default
  • Items are bookmarkable: When an accordion item is clicked, this is noted in the page URL hash. When the page loads, the accordion looks for the hash in the URL and clicks the bookmarked item
  • Multiple items can be opened at once

Expected markup


div.ea-accordion
    div.ea-accordion-item#ea-accordion-[name]    // Repeat as needed.
        h3
            a href="#ea-accordion-[name]"
        div
            [html content]

First Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

<div class="ea-accordion" id="ea-accordion-example">
    <div class="ea-accordion-item" id="ea-accordion-first">
        <h3><a href="#ea-accordion-first">First Item</a></h3>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat. Phasellus pharetra velit dolor, id molestie quam fringilla
              a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
              sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
              scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
              aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
              Donec diam leo, consectetur eget sodales in, aliquet eget ex.
              Praesent nec pretium lectus. Donec libero felis, mattis sit amet
              sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
              malesuada, ante eros pellentesque massa, fermentum dictum nibh
              quam ut dui.</p>
        </div>
    </div>
</div>

<script>(function () {
    // populate the example
    var i,
        item,
        items = ['Second', 'Third', 'Fourth', 'Fifth'],
        container = $('#ea-accordion-example'),
        proto = container.children().first(),
        proto_p = proto.find('p').first();
    for (i = 0; i < 5; i += 1) {
        proto_p.after(proto_p.clone());
    }
    for (i = 0; i < items.length; i += 1) {
        item = proto.clone();
        item.attr('id', 'ea-accordion-' + (items[i].toLowerCase()));
        item.find('h3 a').attr('href', '#ea-accordion-' + (items[i].toLowerCase()))
                         .text(items[i] + ' Item');
        item.appendTo(container);
    }
}());</script>

The pagination does two things:

  • Overrides the default Bootstrap pagination for consistent color theming
  • Adds the ability to place an RSS feed link as the last list entry, with appropriate spacing and border radii

Expected markup:

nav.text-center
ul.pagination
    li.active             // current page
        a|span
    li                    // repeated as necessary
        a 
    li.disabled           // elipsis
       a|span
    li
        a
    li.ea-rss-link        // additional rss link
        a
           i.fa.fa-rss
<section id="pagination-example" class="ea-color-white">
    <nav class="text-center">
        <ul class="pagination">
            <li class="active"><a href=".">
                <span class="page-numbers current">1</span>
            </a></li>
            <li><a class="page-numbers" href="#">
                2
            </a></li>
            <li><a class="page-numbers" href="#">
                3
            </a></li>
            <li class="disabled"><a href="#">
                …
            </a></li>
            <li><a class="page-numbers" href="#">
                409
            </a></li>
            <li><a class="next page-numbers" href="#">
                »
            </a></li>
            <li class="ea-rss-link"><a href="#">
                <i class="fa fa-rss"></i>
            </a></li>
        </ul>
    </nav>
</section>

This module governs the look of article content. Expected markup:

div.row
    article.ea-article.col-xs-12.col-sm-12.col-md-8.col-lg-7                    // adjust columns as appropriate
        div.ea-article-header
            h2
            div.ea-article-meta-white
                p.ea-meta-languages.pull-left                                   // optional
                p.ea-social.pull-right
            div.ea-article-meta-yellow
                p.ea-meta-timestamp.pull-left
                    span.ea-dateformat
                p.ea-meta-byline.pull-right
            div.ea-article-featured-image
                span
                    img
            div.ea-article-meta-grey                                            // image credits
        div.ea-article-body
            div.ea-article-body-content
                p|h3|h4|h5|h6|ul|ol|blockquote                                  // the content should not be wrapped further
                    b|strong|i|em|span...
                div.embed-responsive.embed-responsive-16by9                     // default bootstrap responsive embeds
                    iframe.embed-responsive-item
                div.ea-article-body-image[-left|-right|]                        // images
                    img
                    p|div                                                       // image caption
            div.ea-article-body-extras                                          // additional custom fields wrapper
                div.ea-article-body-[background|positions|timeline|furture-reading] // existing custom fields
                    h4
                    div
                        p|h3|h4|h5|h6|ul|ol|blockquote
                            b|strong|i|em|span...
        div.ea-article-footer
            div.ea-article-meta-white                                           // optional
                p.ea-meta-languages.pull-left                                   // optional
                p.ea-social.pull-right
            div.ea-article-meta-yellow                                          // optional
                p.ea-meta-timestamp.pull-left
                    span.ea-dateformat
                p.ea-meta-byline.pull-right
            div.ea-article-tagcloud
                h3
                dl
                    dt                                                          // tag type
                    dd                                                          // tag list
                        a                                                       // tags

Article Title

Languages: FR DE ES

2015-10-13

From Provider by Author translated by Translator

placeholder
Image credits [with link]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

This is an H3 title tag

This is an H4 title tag

This is an H5 title tag
This is an H6 title tag

This is some BOLD text

This is some STRONG text

This is some italic text

This is some emphasized text

  • An unordered list
  • Another entry
  1. An ordered list
  2. Another entry

A block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

placeholder

The default embeded image format.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

placeholder

A left floated image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

placeholder

A right floated image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat. Phasellus pharetra velit dolor, id molestie quam fringilla a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam aliquam tincidunt felis, non sollicitudin dui vestibulum vel. Donec diam leo, consectetur eget sodales in, aliquet eget ex. Praesent nec pretium lectus. Donec libero felis, mattis sit amet sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare malesuada, ante eros pellentesque massa, fermentum dictum nibh quam ut dui.

placeholder

An image with no meta data:

Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Positions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Timeline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Further Reading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod orci purus, in imperdiet tellus malesuada sit amet. Nam nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque erat.

Related Tags

Sections
TagTagTag TagTagTag TagTagTag TagTagTag TagTagTag TagTagTag
People
TagTagTag TagTagTag
Locations
TagTagTag TagTagTag
Topics
TagTagTag TagTagTag
<script src="//assets.euractiv.com/social/vgmh-social.js"></script>
<link href="//assets.euractiv.com/social/vgmh-social.css" rel="stylesheet">
<div class="row">
<article class="ea-article col-md-8 col-md-offset-2" id="ea-article-example">
    <div class="ea-article-header">
        <h2>Article Title</h2>
        <div class="ea-article-meta-white" id="ea-example-linkmeta">
            <p class="ea-meta-languages pull-left">
                Languages:
                <a href="#">FR</a>
                <a href="#">DE</a>
                <a href="#">ES</a>
            </p>
            <p class="ea-social vgmh-social pull-right"></p>
        </div>
        <div class="ea-article-meta-yellow" id="ea-example-metameta">
            <p class="ea-meta-timestamp pull-left">
                <span
                    class="ea-dateformat"
                    data-timestamp="1444744481"
                >2015-10-13</span>
            </p>
            <p class="ea-meta-byline pull-right">
                From <a href="#">Provider</a>
                by   <a href="#">Author</a>
                translated by <a href="#">Translator</a>
            </p>
        </div>
        <div class="ea-article-featured-image">
            <span>
                <img src="placeholder.png" alt="placeholder">
            </span>
        </div>
        <div class="ea-article-meta-grey">
            Image credits <a href="#">[with link]</a>
        </div>
    </div>
    <div class="ea-article-body">
        <div class="ea-article-body-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat. Phasellus pharetra velit dolor, id molestie quam fringilla
              a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
              sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
              scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
              aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
              Donec diam leo, consectetur eget sodales in, aliquet eget ex.
              Praesent nec pretium lectus. Donec libero felis, mattis sit amet
              sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
              malesuada, ante eros pellentesque massa, fermentum dictum nibh
              quam ut dui.</p>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe
                  class="embed-responsive-item"
                  src="https://www.youtube.com/embed/BKorP55Aqvg"
              ><a href="https://www.youtube.com/watch?v=BKorP55Aqvg">Video
                  link</a></iframe>
            </div>
            <h3>This is an H3 title tag</h3>
            <h4>This is an H4 title tag</h4>
            <h5>This is an H5 title tag</h5>
            <h6>This is an H6 title tag</h6>
            <p><b>This is some BOLD text</b></p>
            <p><strong>This is some STRONG text</strong></p>
            <p><i>This is some italic text</i></p>
            <p><em>This is some emphasized text</em></p>
            <ul>
                <li>An unordered list</li>
                <li>Another entry</li>
            </ul>
            <ol>
                <li>An ordered list</li>
                <li>Another entry</li>
            </ol>
            <blockquote>
	              <p>A block quote. Lorem ipsum dolor sit amet, consectetur
	                  adipiscing elit. Fusce euismod orci purus, in imperdiet
	                  tellus malesuada sit amet. Nam nec ultrices metus, vel
	                  rhoncus lacus. Fusce eget scelerisque erat.</p>
            </blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat.</p>
            <div class="ea-article-body-image">
                <img src="placeholder.png" alt="placeholder">
                <p>The default embeded image format.</p>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat.</p>
            <div class="ea-article-body-image-left">
                <img src="placeholder.png" style="width:150px;height:auto;" alt="placeholder">
                <p>A left floated image.</p>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat. Phasellus pharetra velit dolor, id molestie quam fringilla
              a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
              sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
              scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
              aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
              Donec diam leo, consectetur eget sodales in, aliquet eget ex.
              Praesent nec pretium lectus. Donec libero felis, mattis sit amet
              sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
              malesuada, ante eros pellentesque massa, fermentum dictum nibh
              quam ut dui.</p>
            <div class="ea-article-body-image-right">
                <img src="placeholder.png" style="width:150px;height:auto;" alt="placeholder">
                <p>A right floated image.</p>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
              euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
              nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
              erat. Phasellus pharetra velit dolor, id molestie quam fringilla
              a. Maecenas metus tellus, posuere vitae purus at, faucibus maximus
              sem. Ut ac nibh diam. Morbi lacinia massa non turpis porta, quis
              scelerisque lacus lobortis. Aenean mollis semper fringilla. Nam
              aliquam tincidunt felis, non sollicitudin dui vestibulum vel.
              Donec diam leo, consectetur eget sodales in, aliquet eget ex.
              Praesent nec pretium lectus. Donec libero felis, mattis sit amet
              sem id, varius finibus arcu. Duis ultrices, elit iaculis ornare
              malesuada, ante eros pellentesque massa, fermentum dictum nibh
              quam ut dui.</p>
            <div class="ea-article-body-image-right">
                <img src="placeholder.png" style="width:150px;" alt="placeholder">
            </div>
            <p>An image with no meta data:</p>

        </div>
        <div class="ea-article-body-extras">
            <div class="ea-article-body-background">
                <h4>Background</h4>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                      euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                      nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                      erat.</p>
                </div>
            </div>
            <div class="ea-article-body-positions">
                <h4>Positions</h4>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                      euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                      nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                      erat.</p>
                </div>
            </div>
            <div class="ea-article-body-timeline">
                <h4>Timeline</h4>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                      euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                      nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                      erat.</p>
                </div>
            </div>
            <div class="ea-article-body-further-reading">
                <h4>Further Reading</h4>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                      euismod orci purus, in imperdiet tellus malesuada sit amet. Nam
                      nec ultrices metus, vel rhoncus lacus. Fusce eget scelerisque
                      erat.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ea-article-footer">
        <div class="ea-article-tagcloud" id="ea-example-tagcloud">
            <h3>Related Tags</h3>
            <dl>
                <dt>Sections</dt>
                <dd><a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a></dd>
                <dt>People</dt>
                <dd><a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a></dd>
                <dt>Locations</dt>
                <dd><a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a></dd>
                <dt>Topics</dt>
                <dd><a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a>
                    <a href="#">Tag</a><a href="#">Tag</a><a href="#">Tag</a></dd>

            </dl>
        </div>
    </div>
</article>
</div>
<script>(function () {
    $('#ea-example-linkmeta').clone().insertBefore('#ea-example-tagcloud');
    $('#ea-example-metameta').clone().insertBefore('#ea-example-tagcloud');
    var proto = $('.ea-article-body-background');
    var extras = {};
    for (var prop in extras) {
    }

}());</script>

Configuration

Configuration is located in the file /config/style.php. If you do not have the ability to modify this file, contact your administrator to have options changed. The configuration file should contain an array with the name $config containing the following offsets:

NameTypeDescriptionCurrent Setting
callmap_driverstringThe callmap driver to use, either "sqlite", "fsstore" or "noop"
noop
callmap_labelsarrayLabels for the callmap, where the key is the regular expression to match and the value is the label to useLogin to view this setting
callmap_visualize_defaultarrayNodes to visualize by defaultLogin to view this setting
callmap_probabilityintegerProbability that a given hit will log. Important for high traffic sites. Set higher for lower probability.
1000
http_allowed_domainsarrayAllowed domains for fetching assets or generating URLsLogin to view this setting
http_allowed_urlsarraySpecified URLs or regular expressions of specified URLs match for fetching assets or generating URLsLogin to view this setting
http_connect_timeoutintegerThe amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.
15