Tile

<!-- Default -->
Notice: Undefined index: promo_style in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 1 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0006 304472 2. eval('?>
<?php if ($variables['promo_style'] == "news-landing"): ?>

<?php // News Landing promo ?>

<div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
    <div class="tile__inner">
        <?php if ($variables['type_class'] == 'social'): ?>
        <div class='tile__social tile__type '>
            <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
            <div class='tile__social__tag'>
                <p>
                    <?php print $variables['social_media_data']['tag']; ?>
                </p>
            </div>
        </div>
        <?php else: ?>
        <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
        <?php endif ?>
        <?php print $variables['image']; ?>
        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
            <h3 class="tile__title ">
                <?php print $variables['promo_link']; ?>
            </h3>
            <?php if ($variables['show_meta']): ?>
            <p class="tile__meta">
                <?php print $variables['listing_text']; ?>
                <?php if ($variables['type_class'] == 'social'): ?>
                <?php print $variables['social_media_data']['text']; ?>
                <?php endif ?>
            </p>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php else: ?>

<?php // All other news promos ?>

<div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
    <div class="tile__inner">
        <?php print $variables['image']; ?>
        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
            <?php if ($variables['show_meta']): ?>
            <p class="tile__meta">
                <?php if ($variables['type_class'] == 'social'): ?>
                <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                </span>
                <span class="tile__sep"> | </span>
                <?php else: ?>
                <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                <?php endif ?>
                <span class="tile__date"><?php print $variables['listing_text']; ?></span>
            </p>
            <?php endif; ?>
            <h3 class="tile__title">
                <?php print $variables['promo_link']; ?>
                <?php if ($variables['author_name']): ?>
                <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                <?php endif; ?>
            </h3>
        </div>
    </div>
</div>

<?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

<div class="tile tile--news
    promo__item">
    <div class="tile__inner">
        <img class="tile__image non-vital lazyloaded" src="../../assets/images/sample/example-tile-mi-5.jpg" />
        <div class="tile__text ">

            Notice: Undefined index: show_meta in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 48 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
            0.0006 304472 2. eval('?>
            <?php if ($variables['promo_style'] == "news-landing"): ?>

            <?php // News Landing promo ?>

            <div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                <div class="tile__inner">
                    <?php if ($variables['type_class'] == 'social'): ?>
                    <div class='tile__social tile__type '>
                        <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
                        <div class='tile__social__tag'>
                            <p>
                                <?php print $variables['social_media_data']['tag']; ?>
                            </p>
                        </div>
                    </div>
                    <?php else: ?>
                    <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
                    <?php endif ?>
                    <?php print $variables['image']; ?>
                    <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                        <h3 class="tile__title ">
                            <?php print $variables['promo_link']; ?>
                        </h3>
                        <?php if ($variables['show_meta']): ?>
                        <p class="tile__meta">
                            <?php print $variables['listing_text']; ?>
                            <?php if ($variables['type_class'] == 'social'): ?>
                            <?php print $variables['social_media_data']['text']; ?>
                            <?php endif ?>
                        </p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <?php else: ?>

            <?php // All other news promos ?>

            <div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                <div class="tile__inner">
                    <?php print $variables['image']; ?>
                    <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                        <?php if ($variables['show_meta']): ?>
                        <p class="tile__meta">
                            <?php if ($variables['type_class'] == 'social'): ?>
                            <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                            <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                            </span>
                            <span class="tile__sep"> | </span>
                            <?php else: ?>
                            <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                            <?php endif ?>
                            <span class="tile__date"><?php print $variables['listing_text']; ?></span>
                        </p>
                        <?php endif; ?>
                        <h3 class="tile__title">
                            <?php print $variables['promo_link']; ?>
                            <?php if ($variables['author_name']): ?>
                            <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                            <?php endif; ?>
                        </h3>
                    </div>
                </div>
            </div>

            <?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

            <h3 class="tile__title">
                This is a tile Notice: Undefined index: author_name in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 64 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                0.0006 304472 2. eval('?>
                <?php if ($variables['promo_style'] == "news-landing"): ?>

                <?php // News Landing promo ?>

                <div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                    <div class="tile__inner">
                        <?php if ($variables['type_class'] == 'social'): ?>
                        <div class='tile__social tile__type '>
                            <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
                            <div class='tile__social__tag'>
                                <p>
                                    <?php print $variables['social_media_data']['tag']; ?>
                                </p>
                            </div>
                        </div>
                        <?php else: ?>
                        <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
                        <?php endif ?>
                        <?php print $variables['image']; ?>
                        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                            <h3 class="tile__title ">
                                <?php print $variables['promo_link']; ?>
                            </h3>
                            <?php if ($variables['show_meta']): ?>
                            <p class="tile__meta">
                                <?php print $variables['listing_text']; ?>
                                <?php if ($variables['type_class'] == 'social'): ?>
                                <?php print $variables['social_media_data']['text']; ?>
                                <?php endif ?>
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <?php else: ?>

                <?php // All other news promos ?>

                <div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                    <div class="tile__inner">
                        <?php print $variables['image']; ?>
                        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                            <?php if ($variables['show_meta']): ?>
                            <p class="tile__meta">
                                <?php if ($variables['type_class'] == 'social'): ?>
                                <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                                <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                                </span>
                                <span class="tile__sep"> | </span>
                                <?php else: ?>
                                <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                                <?php endif ?>
                                <span class="tile__date"><?php print $variables['listing_text']; ?></span>
                            </p>
                            <?php endif; ?>
                            <h3 class="tile__title">
                                <?php print $variables['promo_link']; ?>
                                <?php if ($variables['author_name']): ?>
                                <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                                <?php endif; ?>
                            </h3>
                        </div>
                    </div>
                </div>

                <?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

            </h3>
        </div>
    </div>
</div>

<!-- Opinion -->
Notice: Undefined index: promo_style in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 1 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0006 304480 2. eval('?>
<?php if ($variables['promo_style'] == "news-landing"): ?>

<?php // News Landing promo ?>

<div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
    <div class="tile__inner">
        <?php if ($variables['type_class'] == 'social'): ?>
        <div class='tile__social tile__type '>
            <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
            <div class='tile__social__tag'>
                <p>
                    <?php print $variables['social_media_data']['tag']; ?>
                </p>
            </div>
        </div>
        <?php else: ?>
        <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
        <?php endif ?>
        <?php print $variables['image']; ?>
        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
            <h3 class="tile__title ">
                <?php print $variables['promo_link']; ?>
            </h3>
            <?php if ($variables['show_meta']): ?>
            <p class="tile__meta">
                <?php print $variables['listing_text']; ?>
                <?php if ($variables['type_class'] == 'social'): ?>
                <?php print $variables['social_media_data']['text']; ?>
                <?php endif ?>
            </p>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php else: ?>

<?php // All other news promos ?>

<div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
    <div class="tile__inner">
        <?php print $variables['image']; ?>
        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
            <?php if ($variables['show_meta']): ?>
            <p class="tile__meta">
                <?php if ($variables['type_class'] == 'social'): ?>
                <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                </span>
                <span class="tile__sep"> | </span>
                <?php else: ?>
                <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                <?php endif ?>
                <span class="tile__date"><?php print $variables['listing_text']; ?></span>
            </p>
            <?php endif; ?>
            <h3 class="tile__title">
                <?php print $variables['promo_link']; ?>
                <?php if ($variables['author_name']): ?>
                <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                <?php endif; ?>
            </h3>
        </div>
    </div>
</div>

<?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

<div class="tile tile--news
    promo__item">
    <div class="tile__inner">
        <img class="tile__image non-vital lazyloaded" src="../../assets/images/sample/example-tile-mi-4.jpg" />
        <div class="tile__text ">

            Notice: Undefined index: show_meta in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 48 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
            0.0006 304480 2. eval('?>
            <?php if ($variables['promo_style'] == "news-landing"): ?>

            <?php // News Landing promo ?>

            <div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                <div class="tile__inner">
                    <?php if ($variables['type_class'] == 'social'): ?>
                    <div class='tile__social tile__type '>
                        <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
                        <div class='tile__social__tag'>
                            <p>
                                <?php print $variables['social_media_data']['tag']; ?>
                            </p>
                        </div>
                    </div>
                    <?php else: ?>
                    <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
                    <?php endif ?>
                    <?php print $variables['image']; ?>
                    <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                        <h3 class="tile__title ">
                            <?php print $variables['promo_link']; ?>
                        </h3>
                        <?php if ($variables['show_meta']): ?>
                        <p class="tile__meta">
                            <?php print $variables['listing_text']; ?>
                            <?php if ($variables['type_class'] == 'social'): ?>
                            <?php print $variables['social_media_data']['text']; ?>
                            <?php endif ?>
                        </p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <?php else: ?>

            <?php // All other news promos ?>

            <div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                <div class="tile__inner">
                    <?php print $variables['image']; ?>
                    <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                        <?php if ($variables['show_meta']): ?>
                        <p class="tile__meta">
                            <?php if ($variables['type_class'] == 'social'): ?>
                            <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                            <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                            </span>
                            <span class="tile__sep"> | </span>
                            <?php else: ?>
                            <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                            <?php endif ?>
                            <span class="tile__date"><?php print $variables['listing_text']; ?></span>
                        </p>
                        <?php endif; ?>
                        <h3 class="tile__title">
                            <?php print $variables['promo_link']; ?>
                            <?php if ($variables['author_name']): ?>
                            <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                            <?php endif; ?>
                        </h3>
                    </div>
                </div>
            </div>

            <?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

            <h3 class="tile__title">
                This is an Opinion tile Notice: Undefined index: author_name in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 64 Call Stack: 0.0002 278488 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
                0.0006 304480 2. eval('?>
                <?php if ($variables['promo_style'] == "news-landing"): ?>

                <?php // News Landing promo ?>

                <div class="tile
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                    <div class="tile__inner">
                        <?php if ($variables['type_class'] == 'social'): ?>
                        <div class='tile__social tile__type '>
                            <div class='<?php print $variables[' social_media_data ']['type '] . ' tile__social__icon '; ?>'></div>
                            <div class='tile__social__tag'>
                                <p>
                                    <?php print $variables['social_media_data']['tag']; ?>
                                </p>
                            </div>
                        </div>
                        <?php else: ?>
                        <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?></span>
                        <?php endif ?>
                        <?php print $variables['image']; ?>
                        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                            <h3 class="tile__title ">
                                <?php print $variables['promo_link']; ?>
                            </h3>
                            <?php if ($variables['show_meta']): ?>
                            <p class="tile__meta">
                                <?php print $variables['listing_text']; ?>
                                <?php if ($variables['type_class'] == 'social'): ?>
                                <?php print $variables['social_media_data']['text']; ?>
                                <?php endif ?>
                            </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <?php else: ?>

                <?php // All other news promos ?>

                <div class="tile tile--news
    <?php
        print $variables['type_class'] == 'social' ?
            $variables['wrapper_class'] . ' tile__social__container ' :
            $variables['wrapper_class'];
    ?>">
                    <div class="tile__inner">
                        <?php print $variables['image']; ?>
                        <div class="tile__text <?php $variables['type_class'] == 'social' ? print 'social' : NULL; ?>">
                            <?php if ($variables['show_meta']): ?>
                            <p class="tile__meta">
                                <?php if ($variables['type_class'] == 'social'): ?>
                                <span class='tile__social tile__type'>
                        <span class='<?php print $variables['social_media_data']['type'] . ' tile__social__icon'; ?>'></span>
                                <span class='tile__social__tag'><?php print $variables['social_media_data']['tag']; ?></span>
                                </span>
                                <span class="tile__sep"> | </span>
                                <?php else: ?>
                                <span class="tile__type tile__type--<?php print $variables['type_class']; ?>"><?php print $variables['promo_type']; ?><span class="tile__sep"> | </span></span>
                                <?php endif ?>
                                <span class="tile__date"><?php print $variables['listing_text']; ?></span>
                            </p>
                            <?php endif; ?>
                            <h3 class="tile__title">
                                <?php print $variables['promo_link']; ?>
                                <?php if ($variables['author_name']): ?>
                                <span class="tile__author__name"><?php print "by " . $variables['author_name']; ?></span>
                                <?php endif; ?>
                            </h3>
                        </div>
                    </div>
                </div>

                <?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

            </h3>
        </div>
    </div>
</div>

Description

This is a tile containing a square image, a title and meta information. It is also a link.

Example usage: https://wellcome.ac.uk/news


Content notes

UX notes

Design notes

Back-end notes

Front-end notes

/* Default */
{
  "wrapper_class": "promo__item",
  "promo_type": "News",
  "type_class": "news",
  "promo_link": "This is a tile",
  "listing_text": "3 May 2017",
  "image": "<img class=\"tile__image non-vital lazyloaded\" src=\"{{ path /assets/images/sample/example-tile-mi-5.jpg }}\" />"
}

/* Opinion */
{
  "wrapper_class": "promo__item",
  "promo_type": "Opinion",
  "type_class": "opinion",
  "promo_link": "This is an Opinion tile",
  "listing_text": "3 May 2017",
  "image": "<img class=\"tile__image non-vital lazyloaded\" src=\"{{ path /assets/images/sample/example-tile-mi-4.jpg }}\" />"
}