Section previews are a key strategy to promote recirculation by presenting further content to be discovered. 

Publishers can define their own section previews or content groups to be displayed together by completing the following:

  1. Enter the following markup to wrap the content group or section preview:

    data-mrf-group
    CODE

  2. The location where the markup is inserted in your HTML will determine where the content group is displayed in the section page. However to specify the location of the content group, the following markup can be inserted:

    data-mrf-order=""
    CODE


    For example:

    <div data-mrf-group data-mrf-order="3" data-mrf-group-layout="SLIDER" class="chart-module">
    CODE

  3. The title for the section preview or content group must also be defined using the following markup:

    data-mrf-group-title
    CODE

    For example:

    <span data-mrf-group-title class="title-side">Sport Tops</span>
    CODE

  4. The corresponding data-attribute that defines the style of the content group must also be included in the markup.

    data-mrf-group-layout=""
    CODE

    Publishers can choose from any of the following styles: 

Pill

data-mrf-group-layout="pill"
CODE

Photo

data-mrf-group-layout="photo"
CODE

Thumb

data-mrf-group-layout="thumb"
CODE

Slider

data-mrf-group-layout="slider"
CODE

Cards

data-mrf-group-layout="cards"
CODE

Opinion

data-mrf-group-layout="opinion"
CODE

firstPhoto

data-mrf-group-layout="firstphoto"
CODE

mostRead

data-mrf-group-layout="mostRead"
CODE

Usage example

<div data-mrf-group data-mrf-order="3" data-mrf-group-layout="SLIDER" class="chart-module">
    <span data-mrf-group-title class="title-side">Sport Tops</span>
    <ul class="chart">
        <li data-mrf-article>
            <a href="http://www.quotidiano.net/sport/calcio/calciomercato-tutte-le-trattative-1.3216477" class="spf-link" rel="nofollow" title="Calciomercato, tutte le trattative. Inter a un passo da Borja Valero">
                <div class="chart-img-container">

                    <img data-mrf-media src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216476!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" class="lazy " data-src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216476!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Borja Valero, obiettivo dell'Inter " title="Borja Valero, obiettivo dell'Inter " width="300" height="120">
                    <noscript>&lt;img src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216476!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Borja Valero, obiettivo dell&amp;#39;Inter " title="Borja Valero, obiettivo dell&amp;#39;Inter " class="" /&gt;</noscript>

                </div></a>
            <div class="chart-content">
                <span data-mrf-subtitle class="chart-category">Calcio</span>
                <a data-mrf-link href="http://www.quotidiano.net/sport/calcio/calciomercato-tutte-le-trattative-1.3216477" class="spf-link" rel="nofollow" title="Calciomercato, tutte le trattative. Inter a un passo da Borja Valero">
                    <h3 data-mrf-title>Calciomercato, tutte le trattative. Inter a un passo da Borja Valero</h3>
                </a>
            </div>
        </li>
        <li data-mrf-article>
            <a href="http://www.quotidiano.net/sport/calcio/europei-under-21-italia-1.3216310" class="spf-link" rel="nofollow" title="Italia Under 21, batosta contro la Repubblica Ceca">
                <div class="chart-img-container">

                    <img data-mrf-media src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216342!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" class="lazy " data-src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216342!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Petagna (LaPresse)" title="Petagna (LaPresse)" width="300" height="120">
                    <noscript>&lt;img src="http://immagini.quotidiano.net/?url=http://p1014p.quotidiano.net:80/polopoly_fs/1.3216342!/httpImage/image.jpg_gen/derivatives/wide_680/image.jpg&amp;h=120&amp;pos=top&amp;w=300" alt="Petagna (LaPresse)" title="Petagna (LaPresse)" class="" /&gt;</noscript>

                </div></a>
            <div class="chart-content">
                <span data-mrf-subtitle class="chart-category">Calcio</span>
                <a data-mrf-link href="http://www.quotidiano.net/sport/calcio/europei-under-21-italia-1.3216310" class="spf-link" rel="nofollow" title="Italia Under 21, batosta contro la Repubblica Ceca">
                    <h3 data-mrf-title>Italia Under 21, batosta contro la Repubblica Ceca</h3>
                </a>
            </div>
        </li>
    </ul>
</div>
XML