#macro>

This page is for testing pursposes only

This page contains examples that use features developed to meet FRD requirements 2.5, 2.6, 2.7, 2.8 and 2.16

2.5: Showing and hiding content

The container of this text has class hide-on-narrow and it hides in narrow view. Colouring is added to emphasize change.

The container of this text has class hide-on-wide and it hides in wide view. Colouring is added to emphasize change.

2.6: Flexible images


The image above contains in-line styling that makes it proportionally resize to 33% of the parent container. This is an example only - please do not use in-line styling.

2.7: Responsive images


Both the red and the green image above are loaded with the page, but the greenthe yellow one is hidden using hide-on-narrowhide-on-wide class.


The image above is loaded dynamically using data-load-on-narrowdata-load-on-wide. This approach saves on total page size, but images are loaded when they are needed, thus may cause flickering.

2.8: Responsive text

The container of this text has class hide-on-narrow and it hides in narrow view. Colouring is added to emphasize change.

The container of this text has class hide-on-wide and it hides in wide view. Colouring is added to emphasize change.

The text between the horizontal lines below is loaded on demand from two different include files: /en/shop/custom-includes/datacalculator.inc and /en/shop/disabled-terms-and-plans/MTH.inc. Some flickering may occur because loading is done on demand.

--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

2.16: Masthead

Text over images
The image above takes over 100% of its parent container which, in turn, takes over 33% of the width of its container. The text is styled to resize proportionally using css:
position: absolute; bottom: 10%; left: 0; width: 100%; text-align: center; font-size: 4vw;


Link shortcuts

@applib.pageNoJsp> #macro>