Tiles | 2142372

Basis

NS Calling action

.tiles

A tile is a blockelement which is 'painted'. It would normally be used as the first direct decendant of a `.grid__unit', but it's not necessary. It defines it's padding, it's shade and it's color (including gradients).

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <!-- Start of element markup -->
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile {{modifier_class}}">
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h2>NS Calling action</h2>
                </div>
                <div class="tile__footer">
                    <a href="javascript:void(0)" class="button button--arrowRight" title="Voorleestitel uit bannerinhoud in het CMS">
                        Call to Action
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Examples of usage

Tile graphic

Top 5 wandelingen

This component has a icon placed in the top right corner. This is done with the class .tile--tilegraphic. If you wish to position it the same way, make sure to use this class. In this example we are only displaying one icon type.

To add a new icon and/or color make sure to place it in the $bg-tilegraphs:() variable. This will automatically prefix your color and/or icon with tilegraphic--. Therefor when using you have to use it with the prefix. the $bg-tilegraphs:() has a key value relation. Which is where the name of the icon suits as the key and the color as the value. Here is an example of the usage:
$bg-tilegraphs:('hike-large':('nsBlue'));

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12">
        <div class="tile tile--tilegraphic">
            <div class="tile__title">
                <h3 class="tile__heading headingM">
                    Top 5 wandelingen
                    <span class="tile__graphic tilegraphic tilegraphic--products-large tilegraphic--nsBlue"></span>
                </h3>
            </div>
            <div class="tile__content">
                <ul class="list list--specs">
                    <li class="list__item">
                        <a href="eropuit_wandeling-detail.shtml" class="arrowLink">Fort de Roovere</a>
                        <span class="list__spec">12.6&nbsp;km</span>
                    </li>
                    <li class="list__item">
                        <a href="eropuit_wandeling-detail.shtml" class="arrowLink">De Bretten</a>
                        <span class="list__spec">11&nbsp;km</span>
                    </li>
                    <li class="list__item">
                        <a href="eropuit_wandeling-detail.shtml" class="arrowLink">Park Lingezegen</a>
                        <span class="list__spec">7&nbsp;km</span>
                    </li>
                    <li class="list__item">
                        <a href="eropuit_wandeling-detail.shtml" class="arrowLink">Beerschoten</a>
                        <span class="list__spec">6&nbsp;km</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Modifiers

NS Calling action

`.tile--nsLightBlue`

NS-lightblue tile

NS Calling action

`.tile--nsBlue`

NS-blue tile

NS Calling action

`.tile--nsYellow`

NS-yellow tile

NS Calling action

`.tile--shadeYellow`

Tile with a yellow and thicker shade at the bottom

NS Calling action

`.tile--gradient`

A tile that is semi-transparent at the top. The color of the transparency is defined in the tile.

NS Calling action

`.tile--transparent`

A tile that has a 20% transparent white (default) background.

NS Calling action

`.tile--nsBlue.tile--gradient`

A blue tile with gradient.

NS Calling action

`.tile--nsBlue.tile--transparent`

A tile with a 20% transparent blue background.

NS Calling action

`.tile--nsYellow.tile--gradientOnChild`

A yellow tile with a 'gap' that could/should contain a gradient which is on a child.

NS Calling action

`.tile--fullyTransparent`

A completely transparent tile without a dropshadow.

NS Calling action

`.tile--linkOnly`

A tile that will be collapsed on small devices. Everything except the title (including it's link) will be hidden on mobile, but shown from table-devices (breakpoint m)

NS Calling action

`.tile--sCompact`

A tile where tile__header for the mobile version will be hidden

NS Calling action

`.tile--shrink`

A tile that is NOT 100% height of it's parent, but only as high as it's content dictates

NS Calling action

`.tile--clickable`

A tile where the whole tile is clickable, this will have some clean styling.

NS Calling action

`.tile--highlight`

A tile that has a border left with a standard color and in mobile version the color changes to the top

NS Calling action

`.tile--padRight`

A tile that is a introblock, where the title__content has a margin-right to inset the text for fine readabillity

`.tile--banner`

A tile that is a banner

NS Calling action

`.tile--shadow`

A tile that has a shadow at the bottom of the tile

NS Calling action

`.tile--status`

A tile that functions as a status tile with a link

NS Calling action

`.is-clickable`

A pointer as cursor when hovering the element