Source: src/postcss/Common/Examples/_readme.css, line 3
5 Examples
The following examples are designed to demonstrate how we can combine multiple classes in order to give us a reasonable amount of creative control directly in our html.
Source: src/postcss/Common/Examples/_alerts.css, line 1
5.1 Alerts and Notifications
Rather than haviong a specific class, we can just build them in out html like so:
Example
<div>
<div class="flex flex--stretch bg-negative color-grey-0 rounded hide-overflow mgn--b">
<div class="pad bg-negative--shade-1 ">
<i class="icon-cross"></i>
</div>
<div class="pad">
Sorry, something went wrong
</div>
</div>
<div class="flex flex--stretch bg-positive color-grey-0 rounded hide-overflow mgn--b">
<div class="pad bg-positive--shade-1">
<i class="icon-checkmark"></i>
</div>
<div class="pad">
Sweet, something went right
</div>
</div>
<div class="flex flex--stretch bg-warning color-grey-0 rounded hide-overflow mgn--b">
<div class="pad bg-warning--shade-1">
<i class="icon-warning"></i>
</div>
<div class="pad">
Hey, be careful buster
</div>
</div>
<div class="flex flex--stretch bg-grey-1 rounded hide-overflow mgn--b">
<div class="pad bg-grey-2">
<i class="icon-info"></i>
</div>
<div class="pad">
Oh my, i'm dull, grey and boring
</div>
</div>
</div>Source: src/postcss/Common/Examples/_app-header.css, line 1
5.2 App Header
Here we have tried to replicate the app header from exclusive trips (as of Jul 2024)
This is to demonstrate that this can be achieved, however, this might be a good case for a more specific, targeted BEM class.
Why? In cases like this we might want specific link colors and hover effects, or specific button sizing and hovers that fall outside of the scope of the common builder classes, or we may just want simpler code.
Example
<div class="page page--xl bg-grey-1 Rpad">
<div class="app-header pad bg-grey-0 rounded">
<div class="grid">
<div class="grid__col grid__col-xl-6">
<div class="flex flex--distribute full-height flex--align-center flex--has-gap">
<div><img src="../demos/brand_logo.svg" /></div>
<div class="hide hide--until-md"><img src="../demos/brand-protected.svg" /></div>
<div class="hide hide--after-md"><img src="../demos/atol.svg" /></div>
<div class="hide hide--after-md"><button class="btn btn--positive"><i class="icon-phone animate--call"></i></button></div>
<div class="hide hide--after-md"><button class="btn btn--positive"><i class="icon-list"></i></button></div>
<ul class="text-list text-list--checkmark hide hide--until-xl">
<li><a><small>Contact Us</small></a></li>
<li><a><small>Terms & Conditions</small></a></li>
<li><a><small>Privacy Policy</small></a></li>
</ul>
</div>
</div>
<div class="grid__col grid__col-xl-6 hide hide--until-md">
<div class="flex flex--fill flex--no-wrap pad--sm bg-positive rounded box-shadow color-grey-0">
<div class="pad flex flex--align-center">
<div class="btn btn--md btn--white">
<i class="icon-phone color-positive animate--call"></i>
</div>
</div>
<div class="pad-t pad-b flex flex--fill flex--align-center">
<div>
<strong class="h3">0208 123 4567</strong>
<div>Open 7am until late every day!</div>
</div>
</div>
<div class="pad flex flex--align-center" >
<ul class="text-list hide--until-lg">
<li><a class="text-link--on-dark"><small>Contact Us</small></a></li>
<li><a class="text-link--on-dark"><small>Terms & Conditions</small></a></li>
<li><a class="text-link--on-dark"><small>Privacy Policy</small></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_call-to-action.css, line 1
5.3 Call to Action Bar
Here we attempt to replicate the call to action bar from exclusive trips (as of Jul 2024).
Example
0208 123 4567
Open 7am until late every day!
<div class="page page--xl">
<div class="flex flex--fill flex--no-wrap pad--sm bg-positive rounded box-shadow color-grey-0">
<div class="pad flex flex--align-center">
<div class="btn btn--md btn--white">
<i class="icon-phone color-positive animate--call"></i>
</div>
</div>
<div class="pad-t pad-b flex flex--fill flex--align-center">
<div>
<strong class="h3">0208 123 4567</strong>
<div>Open 7am until late every day!</div>
</div>
</div>
<div class="pad flex flex--align-center" >
<ul class="text-list hide--until-lg">
<li><a class="text-link--on-dark"><small>Contact Us</small></a></li>
<li><a class="text-link--on-dark"><small>Terms & Conditions</small></a></li>
<li><a class="text-link--on-dark"><small>Privacy Policy</small></a></li>
</ul>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_cards-1.css, line 1
5.4 Cards
Combining classes and structure gives us a good deal of creative freedom.
Source: src/postcss/Common/Examples/_cards-1.css, line 10
5.4.1 Cards - Basic Examples
By adding and combining basic classes along with good structure, we can start to get the ui we want.
Example
Card Header
Card Content
Here we have changed default rounded corners using the 'squared' class.
Card Header
We add the .card--fill-parent modifier here to expand the card to fill it's parent height
<div class="grid">
<div class="grid__col grid__col-lg-4">
<div class="card">
<div class="card__header">
<h4>Card Header</h4> <i class="icon-info"></i>
</div>
<div class="pad">
Card Content
</div>
<div class="card__footer">
<h4>Card Header</h4> <i class="icon-info"></i>
</div>
</div>
</div>
<div class="grid__col grid__col-lg-4">
<div class="card squared">
<div class="Rpad">
Here we have changed default rounded corners using the 'squared' class.
</div>
</div>
</div>
<div class="grid__col grid__col-lg-4">
<div class="card card--fill-parent">
<div class="card__header">
<h4>Card Header</h4> <i class="icon-info"></i>
</div>
<div class="pad">
We add the .card--fill-parent modifier here to expand the card to fill it's parent height
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_cards-2.css, line 3
5.4.2 Cards - Advanced Examples
Combining classes and structure gives us a good deal of creative freedom.
In the following examples we combine html structure and multiple classes to create more complex, and responsive cards.
Example
Carh header with a loog string that we don't wrap
Absolute Tag
Column 2
Card header with a long string that we do not wrap
Absolute Tag
Column 2
Card header with a long string that we don't wrap
Absolute Tag
Column 2
Absolute Tag 1
Absolute Tag 1
Column 2
Absolute Tag 1
Absolute Tag 1
Absolute Tag 1
Absolute Tag 1
Column 2
<div class="grid">
<div class="grid__col">
<div class="card min-h-full">
<div class="card__header">
<span class="text-no-wrap h1 flex--fill">Carh header with a loog string that we don't wrap</span>
<i class="icon-info"></i>
</div>
<div class="card__body">
<div class="grid">
<div class="grid__col grid__col-lg-6 grid__col-xl-4 img img--bg min-h-md" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<div class="grid__col grid__col-lg-6 grid__col-xl-8 pad">
Column 2
</div>
</div>
</div>
<div class="card__footer">
<h4>Card Footer</h4> <i class="icon-info"></i>
</div>
</div>
</div>
<div class="grid__col grid__col-lg-6 grid__col-xl-3">
<div class="card min-h-full">
<div class="flex border border--b flex--no-wrap pad">
<div class="flex--fill">
<span class="h1">Card header with a long string that we do not wrap</span>
</div><i class="icon-info"></i>
</div>
<div class="pad img img--bg min-h-md" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<div class="pad">
Column 2
</div>
<div class="card__footer">
<h4>Card Footer</h4> <i class="icon-info"></i>
</div>
</div>
</div>
<div class="grid__col grid__col-lg-6 grid__col-xl-3">
<div class="card min-h-full">
<div class="card__header">
<span class="text-no-wrap h1 flex--fill">Card header with a long string that we don't wrap</span> <i class="icon-info"></i>
</div>
<div class="card__body">
<div class="pad img img--bg img--min-md" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<div class="pad">
Column 2
</div>
</div>
<div class="card__footer">
<h4>Card Footer</h4> <i class="icon-info"></i>
</div>
</div>
</div>
<div class="grid__col grid__col-lg-6 grid__col-xl-3">
<div class="card min-h-full">
<div class="img img--bg min-h-md" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm">
<div class="pad-sm rounded bg-brand-2 color-grey-0 mgn--b"><small>Absolute Tag 1</small></div>
<div class="pad-sm rounded bg-brand-1 color-grey-0"><small>Absolute Tag 1</small></div>
</div>
</div>
<div class="pad card__body">
Column 2
</div>
<div class="card__footer">
<h4>Card Footer</h4> <i class="icon-info"></i>
</div>
</div>
</div>
<div class="grid__col grid__col-lg-6 grid__col-xl-3">
<div class="card card--is-link min-h-full hover hover--scale">
<div class="card__img img img--bg flex--fill" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm">
<div class="pad-sm rounded bg-brand-2 color-grey-0 mgn--b"><small>Absolute Tag 1</small></div>
<div class="pad-sm rounded bg-brand-1 color-grey-0"><small>Absolute Tag 1</small></div>
</div>
<div class="abs abs--r pad-sm">
<div class="pad-sm rounded bg-brand-2 color-grey-0 mgn--b"><small>Absolute Tag 1</small></div>
<div class="pad-sm rounded bg-brand-1 color-grey-0"><small>Absolute Tag 1</small></div>
</div>
</div>
<div class="pad">
Column 2
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_drawers.css, line 1
5.5 Drawer - Examples
If we assign a block element the is-drawer class, we transofrm it in smaller viewports to be an off-canvas drawer.
We must also wrap the content in a drawer__body class
Example
Header Title
Drawer Content
This content will transform to be viewable via a drawer in < MD viewport sizes
Header Title
Drawer Content 2
This content will transform to be viewable via a drawer in < LG viewport sizes
<div>
<div>
<div class="hide hide--after-lg">
<button class="btn" data-drawer-show="drawerlg" data-drawer-title="Example Drawer">Open Drawer 1 (LG)</button>
</div>
<div class="hide hide--after-md">
<button class="btn" data-drawer-show="drawermd" data-drawer-title="Example Drawer">Open Drawer 2 (MD)</button>
</div>
</div>
<div>
<div class="drawer drawer--sm drawer--until-md drawer--fill-screen" id="drawermd">
<div class="drawer__header">
<span>Header Title</span>
<button class="btn btn--animate-close close-drawer"><i class="icon-cross"></i></button>
</div>
<div class="is-mobile-drawer__body">
<div class="pad">
<h1>Drawer Content</h1>
<h3>This content will transform to be viewable via a drawer in < MD viewport sizes</h3>
<input type="text" value="Focussable Text Field"></input>
<div class="hide hide--after-md">
<button class="btn close-drawer">close drawer</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="drawer drawer--sm drawer--until-lg drawer--md drawer--right" id="drawerlg">
<div class="drawer__header">
<span>Header Title</span>
<button class="btn btn--animate-close close-drawer"><i class="icon-cross"></i></button>
</div>
<div class="is-mobile-drawer__body">
<div class="pad">
<h1>Drawer Content 2</h1>
<h3>This content will transform to be viewable via a drawer in < LG viewport sizes</h3>
<input type="text" value="Focussable Text Field"></input>
<div class="hide hide--after-lg">
<button class="btn close-drawer">close drawer</button>
</div>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_modals.css, line 1
5.6 Modal - Examples
Combining classes and structure gives us a good deal of creative freedom.
In the following examples we combine html structure and multiple classes to create more advance responsive UI without the need for the creation of targeted, specific classes.
Example
<div>
<dialog role="dialog" class="modal modal--animate-bottom" id="example-modal-1" aria-labelledby="example-modal-1-title" aria-describedby="example-modal-1-description" aria-modal="true">
<div class="modal__container">
<div class="modal__header flex flex--distribute flex--has-gap pad">
<div>
<h4 id="example-modal-1-title">Example Modal 1</h4>
<h5 id="example-modal-1-description" class="hide">Modal description</h5>
</div>
<button class="btn btn--animate-close" data-modal-hide="example-modal-1"><i class="icon-cross"></i></button>
</div>
<div class="modal__body">
<div>
<div class="img img--bg img--min-lg" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<article class="article pad">
<h2>Content Heading</h2>
<div class="pad--b">
<input type="Text" class="full-width" placeholder="tabbable element 1" />
</div>
<div class="pad--b">
<a href=""> Tabbable Element 2</a>
</div>
<div class="pad--b">
<button class="btn"> Tabbable Element 3</button>
</div>
<p>The <strong>.modal__body</strong> class will auto-fit content, but will stretch to the mnax height of the modal itself, and will be scrollable if the content exceeds the <strong>.modal__body</strong> height</p>
<p>Any html placed above or below the <strong>.modal__body</strong> will be sized to it's content, meaning we can have multiple static, non-scrollable elements along with the main scrolling content (modal__body)</p>
</article>
</div>
</div>
<div class="modal__footer flex flex--distribute pad">
<h4>Modal Optional Footer</h4>
</div>
</div>
</div>
</dialog>
<dialog role="dialog" class="modal modal--animate-bottom modal--fullscreen" id="example-modal-2" aria-labelledby="example-modal-2-title" aria-describedby="example-modal-2-description" aria-modal="true">
<div class="modal__container">
<div class="modal__header flex flex--distribute flex--has-gap pad">
<div>
<h4 id="example-modal-2-title">Example Modal 2</h4>
<h5 id="example-modal-2-description" class="hide">Modal description 2</h5>
</div>
<button class="btn btn--animate-close" data-modal-hide="example-modal-2"><i class="icon-cross"></i></button>
</div>
<ol class="stepper stepper--icons stepper--sm Rpad--t Rpad--b">
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<h3 class="c-stepper__title">Step Title</h3>
<p class="c-stepper__desc">Completed subititle</p>
</li>
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<h3 class="c-stepper__title">Step Title</h3>
<p class="c-stepper__desc">Completed subititle</p>
</li>
<li class="stepper__step stepper__step--active">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<h3 class="c-stepper__title">Step Title</h3>
<p class="c-stepper__desc">Active subititle</p>
</li>
</ol>
<div class="modal__body">
<div>
<div class="img img--bg img--min-lg" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<article class="article pad">
<h2>Content Heading</h2>
<div>
<input type="Text" class="full-width" placeholder="input 1" />
</div>
<div>
<input type="Text" class="full-width" placeholder="input 2" />
</div>
<div>
<input type="Text" class="full-width" placeholder="input 3" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
<div class="modal__footer flex flex--distribute pad">
<h4>Modal Optional Footer</h4>
</div>
</div>
</div>
</dialog>
<dialog role="dialog" class="modal modal--animate-bottom modal--md" id="example-modal-3" aria-labelledby="example-modal-3-title" aria-describedby="example-modal-3-description" aria-modal="true">
<div class="modal__container">
<div class="modal__header flex flex--distribute flex--has-gap pad">
<div>
<h4 id="example-modal-2-title">Example Modal 3</h4>
<h5 id="example-modal-2-description" class="hide">Modal description 2</h5>
</div>
<button class="btn btn--animate-close" data-modal-hide="example-modal-3"><i class="icon-cross"></i></button>
</div>
<div class="modal__body">
<div class="grid">
<div class="grid__col grid__col-lg-6 pad">
<div class="input-item mgn--b">
<label>Input Label</label>
<input type="Text" class="full-width" placeholder="input 1" />
</div>
<div class="input-item mgn--b">
<label>Input Label</label>
<input type="Text" class="full-width" placeholder="input 2" />
</div>
<div class="input-item mgn--b">
<label>Input Label</label>
<input type="Text" class="full-width" placeholder="input 3" />
</div>
</div>
<div class="grid__col grid__col-lg-6">
<div class="pad">
<div class="img img--bg img--min-lg Rmgn--b" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="abs pad-sm bg-brand-2 color-grey-0">Absolute Tag</div>
</div>
<article class="article Rpad--t Rpad--b">
<h2>Content Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
</div>
</div>
</div>
</dialog>
<dialog role="dialog" class="modal modal--animate-bottom" id="example-modal-4" aria-labelledby="example-modal-3-title" aria-describedby="example-modal-3-description" aria-modal="true">
<div class="modal__container">
<div class="modal__header flex flex--distribute flex--has-gap pad">
<div>
<h4 id="example-modal-2-title">Example Modal 4</h4>
<h5 id="example-modal-2-description" class="hide">Modal description 2</h5>
</div>
<button class="btn btn--animate-close" data-modal-hide="example-modal-4"><i class="icon-cross"></i></button>
</div>
<div class="modal__body">
<div class="calendar pad">
<div class="calendar__tools">
<button class="btn"><i class="icon-chevron-left" title="Previous Month"></i></button>
<select>
<option value="February 2024" selected>February 2024</option>
</select>
<button class="btn"><i class="icon-chevron-right" title="Next Month"></i></button>
</div>
<ul class="calendar__day-of-week">
<li>Su</li>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
</ul>
<ul class="calendar__date-grid">
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="btn--positive hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£49</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li class="calendar__null"></li>
</ul>
</div>
</div>
</div>
</dialog>
<button class="open-modal" data-modal-show="example-modal-1" data-modal-header="test 1">Open Modal 1</div>
<button class="open-modal" data-modal-show="example-modal-2">Open Modal 2</div>
<button class="open-modal" data-modal-show="example-modal-3">Open Modal 3</div>
<button class="open-modal" data-modal-show="example-modal-4">Open Modal 4</div>
</div>Source: src/postcss/Common/Examples/_product-select-basic.css, line 1
5.7 Product Select Example
By combining classes in an order that makes sense, we have some control directly in the html
In this example
layout we have applied a page class and a modifier of page--md which controls the overall max width of our container. along with a grid setup to make it repsonsive
top products we have applied a few classes to make it a pill, and even though we are using radio buttons, we make them appear as checkboxes, by using the 'chk' class rather than 'rad'
basket we have applied the sticky class and a modifier to stick to the top
sections we have applied the zebra class sto the parent element so that each section alternates background greyscale color
Example
Basket Content
Item£100.00
Item£100.00
Item£100.00
Item£100.00
<div class="page page--md bg-grey-4 Rpad rounded">
<div class="grid">
<div class="grid__col grid__col-lg-8 zebra">
<section class="pad">
<div class="rad-group rad-group--pill full-width">
<div class="chk chk--label-top bg-grey-1 chk--negative chk--product-select" data-nav-item>
<input type="radio" name="regx" id="rex1" checked>
<label for="rex1">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</div>
<div class="chk chk--label-top bg-grey-1 chk--product-select chk--positive" data-nav-item>
<input type="radio" name="regx" id="rex2">
<label for="rex2">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</div>
<div class="chk chk--label-top bg-grey-1 chk--brand-1 chk--product-select" data-nav-item>
<input type="radio" name="regx" id="rex3">
<label for="rex3">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</div>
</section>
<section class="pad">
<div class="rad rad--negative rad--product-select">
<input type="radio" name="reg2" id="re1" checked>
<label for="re1">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</div>
<div class="rad rad--positive rad--product-select">
<input type="radio" name="reg2" id="re2" checked>
<label for="re2">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</div>
</section>
<section class="pad">
Next Row
</section>
<section class="pad">
Next Row
</section>
<section class="pad">
Next Row
</section>
<section class="pad">
Next Row
</section>
<section class="pad">
Next Row
</section>
</div>
<div class="grid__col grid__col-lg-4">
<div class="bg-grey-0 sticky sticky--top rounded">
<div class="pad pad--sm">
<h4 class="mgn--b">Basket Content</h4>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<button class="btn btn--positive full-width mgn--t">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/_ad-grid.css, line 43
5.8 Test Layout - Ad Grid
Testing ui for ad grid style.
Example
<div class="ad-grid">
<grid-cell>
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h4><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</grid-cell>
<grid-cell>
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h4><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</grid-cell>
<grid-cell>
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h4><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</grid-cell>
<grid-cell>
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h4><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</grid-cell>
<grid-cell>
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h4><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</grid-cell>
</div>Source: src/postcss/Common/Examples/_full-page-1.css, line 1
5.9 Page Examples
Ideas for page layouts and markup.
Source: src/postcss/Common/Examples/_galaxy_brand_test.css, line 1
5.9.1 Galaxy Brand test
In this example we go heavier on the html sematics, by making our product selects an unoredered list, which makes sense from a semantic point of view. Note how this does not change our percieved UI, but is probably better overall document structure.
Additionally we have some icons, made large by applying an h2 class.
Example
Jumbo Content Heading
Jumbo content subheading
SALE
NOW ON
-
Step Title Completed subititle
-
Step Title Completed subititle
-
Step Title Completed subititle
-
Step Title Completed subititle
-
Step Title Completed subititle
- Select Your Vehicle
Basket
Item£100.00
Item£100.00
Item£100.00
Item£100.00
<div class="bkg-liquid">
<header class="app-header Rpad--t Rpad--b bg-grey-0 bs-b-dark-sm relative ">
<div class="page page--xl">
<div class="flex flex--no-wrap flex--distribute flex--align-center flex--has-gap ">
<div class="flex--fill">
<div class="flex flex--align-center flex--has-gap flex--fill flex--no-wrap">
<a href="/" class="hover hover--scale">
<img src="../demos/Galaxy_logo_v2.png" alt="Brand logo" class="img-h-h1" />
</a>
<div><img src="../demos/atol.svg" class="img-h-h1" /></div>
</div>
</div>
<div>
<div class="flex flex--distribute flex--has-gap flex--fill flex--no-wrap rounded flex--align-center">
<div class="hide hide--until-lg">
<div class="min-h-full flex flex--align-center flex--has-gap">
<a href="/">Home</a>
<a role="button">About</a>
<a href="contact">Contact</a>
<a href="/deals">Special Offers</a>
</div>
</div>
<a class="block-link flex flex--align-center" href="tel:@StateContainerService.ContactNumber">
<div class="flex flex--align-center mgn-sm--r">
<div class="btn btn--md btn--brand-1 ">
<i class="icon-phone color-grey-0 animate--call"></i>
</div>
</div>
<div class="flex flex--fill flex--align-center">
<div class="hide hide--until-lg">
<strong class="h3">0123 456 7890</strong>
<div class="tag tag--sm rounded bg-grey-3"><strong>Open 7am until late every day!</strong></div>
</div>
</div>
</a>
<div class="hide hide--after-lg">
<button class="btn btn--transparent"><i class="icon-menu h1"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="jumbo jumbo--underlay jumbo--underlay-t-b min-h-lg Rmgn--b flex flex--align-center flex--justify-center flex--is-column page page--xxl align-center" style='background-image: url("../demos/jumbo1.png");'>
<div class="jumbo__content page page--xl ">
<h1 class="ts-dark"><strong>Jumbo Content Heading</strong></h1>
<h2 class="ts-dark">Jumbo content subheading</h2>
<div class="mgn--t mgn--b rounded bg-negative Rpad color=grey-0 flex flex--is-column">
<h1>SALE</h1>
<h2>NOW ON</h2>
</div>
</div>
</div>
<div class="page page--xl">
<section class="bg-grey-0 rounded pad Rmgn--b">
<ol class="stepper stepper--counter stepper--sm stepper--brand-2">
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--active">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
</ol>
</section>
<div class="grid">
<div class="grid__col grid__col-xl-2 hide hide--until-xl relative">
<div class="bg-grey-0 sticky sticky--top rounded">
<div class="pad pad--sm">
Some Arbitrary Content that we will <strong>hide until</strong> our xl breakpoint.
</div>
</div>
</div>
<div class="grid__col grid__col-lg-8 grid__col-xl-7 bg-grey-0 pad rounded">
<section class="Rmgn--b">
<ul class="rad-group rad-group--pill full-width">
<li class="chk chk--label-top bg-grey-1 chk--brand-2 chk--product-select" data-nav-item>
<input type="radio" name="regxg" id="rexg-1" checked>
<label for="rexg-1">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
<li class="chk chk--label-top bg-grey-1 chk--product-select chk--brand-2" data-nav-item>
<input type="radio" name="regxg" id="rexg-2">
<label for="rexg-2">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
<li class="chk chk--label-top bg-grey-1 chk--brand-2 chk--product-select " data-nav-item>
<input type="radio" name="regxg" id="rexg-3">
<label for="rexg-3">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
</ul>
</section>
<ul class="pad bg-grey-1 Rmgn--b rounded">
<li class="pad--b">
<strong class="h4">Select Your Vehicle
</strong>
</li>
<li class="rad rad--brand-2 rad--product-select">
<input type="radio" name="regxg2" id="rexg2-1" checked>
<label for="rexg2-1">
<i class="icon-car h2 pad" aria-hidden="true"></i>
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price class="color-brand-1">
included
</product-price>
</label>
</li>
<li class="rad rad--brand-2 rad--product-select">
<input type="radio" name="regxg2" id="rexg2-2" checked>
<label for="rexg2-2">
<i class="icon-bus h2 pad" aria-hidden="true"></i>
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
</ul>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
</div>
<div class="grid__col grid__col-lg-4 grid__col-xl-3 ">
<div class="card sticky sticky--top rounded">
<div class="card__header">
<h4><strong>Basket</strong></h4>
<i class="icon-cart"></i>
</div>
<div class="card__content pad pad--sm">
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<button class="btn btn--brand-2 full-width mgn--t">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_hb_hotel_page.css, line 1
5.9.2 HB Hotel Page Test
Example of how we can build the existing HB hotel style page
Example
-
Cell 1
-
Cell 2
-
Cell 3
-
Cell 4
-
Cell 5
-
Cell 6
-
Cell 7
-
Cell 8
-
Cell 9
-
Cell 10
-
Cell 1
-
Cell 2
-
Cell 3
-
Cell 4
-
Cell 5
-
Cell 6
-
Cell 7
-
Cell 8
-
Cell 9
-
Cell 10
Configure Holiday
SAT
23
MAY 2023
Info Line 1
Info Line 2
Info Line 3
£000.00
Per Person
Flights
23 May 2023 00:00 > 00:00
London Gatwick - PMI
23 May 2023 00:00 > 00:00
London Gatwick - PMI
Accommodation
Room Info
Card 3
Flight Info 1
- Keypoint 1
- Keypoint 2
£100.00
Total Holiday Cost
<div class="page page--xl">
<div class="grid">
<div class="grid__col grid__col-lg-6">
<ul class="carousel carousel-htl carousel--75" data-flickity='{ "cellAlign": "center", "contain": true, "groupCells": "100%", "pageDots": false }'>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-md full-width rounded">
Cell 1
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 2
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 3
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 4
</div>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 5
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 6
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 7
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 8
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 9
</div>
</li>
<li class="carousel-cell mgn--r mgn--l">
<div class="bg-brand-1 pad min-h-lg full-width rounded">
Cell 10
</div>
</li>
</ul>
<ul class="carousel carousel--tn mgn--t" data-flickity='{ "cellAlign": "center", "contain": true, "groupCells": "100%", "pageDots": false, "asNavFor": ".carousel-htl" }'>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 1
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 2
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 3
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 4
</div>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 5
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 6
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 7
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 8
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 9
</div>
</li>
<li class="carousel-cell mgn-sm--r mgn-sm--l">
<div class="bg-brand-1 rounded">
Cell 10
</div>
</li>
</ul>
<article class="mgn--t">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</article>
</div>
<div class="grid__col grid__col-lg-6">
<!--TOP INFO PART-->
<div class="mgn--b h2"><strong>Configure Holiday</strong></div>
<div class="flex flex--no-wrap flex--has-gap">
<div class="flex flex--is-column rounded border border--all align-center">
<div class="pad-sm bg-grey-3">SAT</div>
<div class="h2 bg-grey-0">23</div>
<div class="pad-sm bg-grey-3">MAY 2023</div>
</div>
<div class="flex--fill">
<div><small>Info Line 1</small></div>
<div><small>Info Line 2</small></div>
<div><small>Info Line 3</small></div>
</div>
<div class="align-right">
<strong class="h1">£000.00</strong>
<div>Per Person</div>
</div>
</div>
<!--PRODUCTS PART-->
<div class="bg-grey-3 rounded pad mgn--t mgn--b">
<div class="card mgn--b">
<div class="card__header"><strong>Flights</strong></div>
<div class="card__body pad">
<div class="flex">
<div class="flex--fill">
<div class="mgn-sm--b"><span class="tag bg-grey-3 mgn-sm--r"><i class="icon-airplane"></i> 23 May 2023 <strong>00:00 > 00:00</strong></span></div>
<div>London Gatwick - PMI</div>
</div>
<div class="flex--fill">
<div class="mgn-sm--b"><span class="tag bg-grey-3 mgn-sm--r"><i class="icon-airplane"></i> 23 May 2023 <strong>00:00 > 00:00</strong></span></div>
<div>London Gatwick - PMI</div>
</div>
</div>
</div>
</div>
<div class="card mgn--b">
<div class="card__header">
<strong>Accommodation</strong>
<div class="flex flex--has-gap">
<div class="chk chk--label-bottom chk--positive">
<input type="radio" id="rd-board-1" name="rd-boards" checked>
<label for="rd-board-1"><small>B & B</small></label>
</div>
<div class="chk chk--label-bottom chk--positive" >
<input type="radio" id="rd-board-2" name="rd-boards">
<label for="rd-board-2"><small>All Inc.</small></label>
</div>
<div class="chk chk--label-bottom chk--positive" >
<input type="radio" id="rd-board-3" name="rd-boards">
<label for="rd-board-3"><small>H.Board</small></label>
</div>
</div>
</div>
<div class="card__body pad">
<small>Room Info</small>
</div>
</div>
<div class="card">
<div class="card__header"><strong>Card 3</strong></div>
<div class="card__body pad">
<small>Flight Info 1</small>
</div>
</div>
</div>
<!--// PRODUCTS PART-->
<!--BOTTOM INFO PART-->
<div class="flex">
<div class="flex--fill">
<ul class="text-list text-list--checkmark-round-green">
<li>Keypoint 1</li>
<li>Keypoint 2</li>
</ul>
</div>
<div class="align-right">
<strong class="h1">£100.00</strong>
<div>Total Holiday Cost</div>
<button class="btn btn--md btn--positive btn--rounded">Book Online</button>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_full-page-1.css, line 12
5.9.3 Full Page Example 1
In this example we go heavier on the html sematics, by making our product selects an unoredered list, which makes sense from a semantic point of view. Note how this does not change our percieved UI, but is probably better overall document structure.
Additionally we have some icons, made large by applying an h2 class.
Example
<div>
<div class="page page--xl bg-grey-1 pad">
<header class="app-header Rpad--t Rpad--b bg-grey-0 bs-b-dark-md relative rounded mgn--b ">
<div class="page page--xl">
<div class="flex flex--no-wrap flex--distribute flex--align-center flex--has-gap ">
<div class="flex--fill">
<div class="flex flex--align-center flex--has-gap flex--fill flex--no-wrap">
<a href="/" class="hover hover--scale">
<img src="../demos/Galaxy_logo_v2.png" alt="Brand logo" class="img-h-h1" />
</a>
<div><img src="../demos/atol.svg" class="img-h-h1" /></div>
</div>
</div>
<div>
<div class="flex flex--distribute flex--has-gap flex--fill flex--no-wrap rounded flex--align-center">
<div class="hide hide--until-lg">
<div class="min-h-full flex flex--align-center flex--has-gap">
<a href="/">Home</a>
<a role="button">About</a>
<a href="contact">Contact</a>
<a href="/deals">Special Offers</a>
</div>
</div>
<a class="block-link flex flex--align-center" href="tel:@StateContainerService.ContactNumber">
<div class="flex flex--align-center mgn-sm--r">
<div class="btn btn--md btn--brand-1 ">
<i class="icon-phone color-grey-0 animate--call"></i>
</div>
</div>
<div class="flex flex--fill flex--align-center">
<div class="hide hide--until-lg">
<strong class="h3">0123 456 7890</strong>
<div class="tag tag--sm rounded bg-grey-3"><strong>Open 7am until late every day!</strong></div>
</div>
</div>
</a>
<div class="hide hide--after-lg">
<button class="btn btn--transparent"><i class="icon-menu h1"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="bg-grey-0 rounded pad Rmgn--b">
<ol class="stepper stepper--icons ">
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--complete">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step stepper__step--active">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
<li class="stepper__step">
<div class="stepper__icon"><i class="icon-airplane" aria-hidden="true"></i></div>
<strong>Step Title</strong>
<small>Completed subititle</small>
</li>
</ol>
</section>
<div class="grid">
<div class="grid__col grid__col-xl-2 hide hide--until-xl relative">
<div class="bg-grey-0 sticky sticky--top rounded">
<div class="pad pad--sm">
Some Arbitrary Content that we will <strong>hide until</strong> our xl breakpoint.
</div>
</div>
</div>
<div class="grid__col grid__col-lg-8 grid__col-xl-7 bg-grey-0 pad rounded">
<section class="Rmgn--b">
<ul class="rad-group rad-group--pill full-width">
<li class="chk chk--label-top bg-grey-1 chk--positive chk--product-select" data-nav-item>
<input type="radio" name="regx2" id="rex2-1" checked>
<label for="rex2-1">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
<li class="chk chk--label-top bg-grey-1 chk--product-select chk--positive" data-nav-item>
<input type="radio" name="regx2" id="rex2-2">
<label for="rex2-2">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
<li class="chk chk--label-top bg-grey-1 chk--positive chk--product-select " data-nav-item>
<input type="radio" name="regx2" id="rex2-3">
<label for="rex2-3">
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
</ul>
</section>
<ul class="pad bg-grey-1 Rmgn--b rounded">
<li class="pad--b">
<strong class="h4">Select Your Vehicle
</strong>
</li>
<li class="rad rad--positive rad--product-select">
<input type="radio" name="regx3" id="rex3-1" checked>
<label for="rex3-1">
<i class="icon-car h2 pad" aria-hidden="true"></i>
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price class="color-positive">
included
</product-price>
</label>
</li>
<li class="rad rad--positive rad--product-select">
<input type="radio" name="regx3" id="rex3-2" checked>
<label for="rex3-2">
<i class="icon-bus h2 pad" aria-hidden="true"></i>
<product-name>
<strong>Product Name</strong>
<div><small>Product Description</small></div>
</product-name>
<product-price>
$50
</product-price>
</label>
</li>
</ul>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
<section class="pad bg-grey-1 Rmgn--b rounded">
Next Row
</section>
</div>
<div class="grid__col grid__col-lg-4 grid__col-xl-3 ">
<div class="card sticky sticky--top rounded">
<div class="card__header">
<h4><strong>Basket</strong></h4>
<i class="icon-cart"></i>
</div>
<div class="card__content pad pad--sm">
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<button class="btn btn--positive full-width mgn--t">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_full-page-2.css, line 1
5.9.4 Full Page Example 2
In this example we go heavier on the html sematics, by making our product selects an unoredered list, which makes sense from a semantic point of view. Note how this does not change our percieved UI, but is probably better overall document structure.
Additionally we have some icons, made large by applying an h2 class.
Example
<div>
<div class="page page--xl bg-grey-1 pad">
<header class="app-header Rpad--t Rpad--b bg-grey-0 bs-b-dark-md relative rounded mgn--b ">
<div class="page page--xl">
<div class="flex flex--no-wrap flex--distribute flex--align-center flex--has-gap ">
<div class="flex--fill">
<div class="flex flex--align-center flex--has-gap flex--fill flex--no-wrap">
<a href="/" class="hover hover--scale">
<img src="../demos/Galaxy_logo_v2.png" alt="Brand logo" class="img-h-h1" />
</a>
<div><img src="../demos/atol.svg" class="img-h-h1" /></div>
</div>
</div>
<div>
<div class="flex flex--distribute flex--has-gap flex--fill flex--no-wrap rounded flex--align-center">
<div class="hide hide--until-lg">
<div class="min-h-full flex flex--align-center flex--has-gap">
<a href="/">Home</a>
<a role="button">About</a>
<a href="contact">Contact</a>
<a href="/deals">Special Offers</a>
</div>
</div>
<a class="block-link flex flex--align-center" href="tel:@StateContainerService.ContactNumber">
<div class="flex flex--align-center mgn-sm--r">
<div class="btn btn--md btn--brand-1 ">
<i class="icon-phone color-grey-0 animate--call"></i>
</div>
</div>
<div class="flex flex--fill flex--align-center">
<div class="hide hide--until-lg">
<strong class="h3">0123 456 7890</strong>
<div class="tag tag--sm rounded bg-grey-3"><strong>Open 7am until late every day!</strong></div>
</div>
</div>
</a>
<div class="hide hide--after-lg">
<button class="btn btn--transparent"><i class="icon-menu h1"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="breadcrumbs mgn--b">
<span><a href="">Item</a></span><span><a href="">Item</a></span><span><a href="">Item</a></span><span>Item</span>
</section>
<div class="grid">
<div class="grid__col grid__col-xl-3">
<div class="bg-grey-0 rounded">
<div class="flex flex--wrap flex--has-gap flex--distribute flex--column-at-xl pad pad--sm">
<div class="input-item flex--fill">
<label for="sel">Fly From</label>
<div class="select">
<select id="sel" class="full-width">
<option value="Any London" selected>Any London</option>
<option value="Manchester">Manchester</option>
<option value="London Gatwick">London Gatwick</option>
</select>
</div>
</div>
<div class="input-item flex--fill">
<label for="sel">People</label>
<div class="select">
<select id="sel" class="full-width">
<option value="February 2024" selected>February 2024</option>
<option value="February 2024">February 2024</option>
<option value="February 2024">February 2024</option>
</select>
</div>
</div>
<div class="input-item flex--fill">
<label for="sel">Date</label>
<div class="select">
<select id="sel" class="full-width">
<option value="February 2024" selected>February 2024</option>
<option value="February 2024">February 2024</option>
<option value="February 2024">February 2024</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col-xl-6">
<div class="calendar pad pad--md rounded bg-grey-0">
<div class="calendar__tools">
<button class="btn btn--transparent"><i class="icon-chevron-left" title="Previous Month"></i></button>
<div>
<div class="select flex--fill">
<select id="sel">
<option value="February 2024" selected>February 2024</option>
<option value="February 2024">February 2024</option>
<option value="February 2024">February 2024</option>
</select>
</div>
</div>
<button class="btn btn--transparent"><i class="icon-chevron-right" title="Next Month"></i></button>
</div>
<ul class="calendar__day-of-week">
<li>Su</li>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
</ul>
<ul class="calendar__date-grid">
<li class="calendar__null"></li>
<li class="calendar__null"></li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="btn--positive hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£49</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li>
<button class="hover hover--scale">
<calendar-day class="border--b">1</calendar-day>
<calendar-price-from>From</calendar-price-from>
<calendar-price>£199</calendar-price>
</button>
</li>
<li class="calendar__null"></li>
</ul>
</div>
</div>
<div class="grid__col grid__col-xl-3 ">
<div class="card sticky sticky--top rounded">
<div class="card__header">
<h4><strong>Holiday Details</strong></h4>
</div>
<div class="card__content pad pad--sm">
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<div class="flex flex--distribute border-b">
<span>Item</span><span>£100.00</span>
</div>
<button class="btn btn--positive full-width mgn--t">Purchase Now</button>
</div>
</div>
</div>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_test-layout-1.css, line 1
5.9.5 Layouts
Here we are sxperimenting with the scope of the framework so far to see what we can do with alternative layout.
Example
Book with Complete Confidence
We've been in the business for over 20 years
Check out all of our great reasons to book
USP 1
USP 1
USP 1
USP 1
Popular Holidays
Incredible hand selected deals to suit your budget
<div class="bkg-liquid">
<div class="jumbo jumbo--underlay jumbo--underlay-t-b jumbo--pad jumbo--min-xxxl Rmgn--b" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="page page--xl">
<div class="jumbo__content">
<header class="app-header Rpad--t Rpad--b bg-grey-0 bs-b-dark-sm relative ">
<div class="page page--xl">
<div class="flex flex--no-wrap flex--distribute flex--align-center flex--has-gap ">
<div class="flex--fill">
<div class="flex flex--align-center flex--has-gap flex--fill flex--no-wrap">
<a href="/" class="hover hover--scale">
<img src="../demos/Galaxy_logo_v2.png" alt="Brand logo" class="img-h-h1" />
</a>
<div><img src="../demos/atol.svg" class="img-h-h1" /></div>
</div>
</div>
<div>
<div class="flex flex--distribute flex--has-gap flex--fill flex--no-wrap rounded flex--align-center">
<div class="hide hide--until-lg">
<div class="min-h-full flex flex--align-center flex--has-gap">
<a href="/">Home</a>
<a role="button">About</a>
<a href="contact">Contact</a>
<a href="/deals">Special Offers</a>
</div>
</div>
<a class="block-link flex flex--align-center" href="tel:@StateContainerService.ContactNumber">
<div class="flex flex--align-center mgn-sm--r">
<div class="btn btn--md btn--brand-1 ">
<i class="icon-phone color-grey-0 animate--call"></i>
</div>
</div>
<div class="flex flex--fill flex--align-center">
<div class="hide hide--until-lg color-brand-1">
<strong class="h3">0123 456 7890</strong>
<div class="tag tag--sm rounded bg-grey-3"><strong>Open 7am until late every day!</strong></div>
</div>
</div>
</a>
<div class="hide hide--after-lg">
<button class="btn btn--transparent"><i class="icon-menu h1"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="Rpad align-center">
<h1><strong class="font-2 text-xl stroke-white-sm color-brand-2 ts-dark-md">Some Page Title Goes Here</strong></h1>
</div>
<div class="Rpad align-center">
<a class="Rmgn--t btn btn--positive">Check Out Our Latest Deals</a>
</div>
</div>
</div>
</div>
<div class="page page--md Rpad--b Rpad--t Rmgn--b">
<section class="Rmgn--b align-center">
<div class="Rmgn--b">
<h1><strong>Book with Complete Confidence</strong></h1>
<h2 class="color-grey-7">We've been in the business for over 20 years</h2>
<h3 class="color-grey-5"><em>Check out all of our great reasons to book</em></h2>
</div>
<div class="flex flex--wrap full-width zebra zebra--grey-1">
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
</div>
</section>
</div>
<div class="page page--xl Rmgn--b Rpad--b Rpad--t">
<div class="Rmgn--b align-center">
<h1><strong>Popular Holidays</strong></h1>
<h2>Incredible hand selected deals to suit your budget</h2>
</div>
<div class="grid">
<div class="grid__col grid__col-lg-6 relative" >
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<div class="grid Rmgn--b">
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
</div>
<div class="grid">
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
</div>
</div>
</div>
<div class="align-center">
<a class="Rmgn--t btn btn--positive">More like this</a>
</div>
</div>
</div>Source: src/postcss/Common/Examples/_test-layout-galaxy.css, line 1
5.9.5 Test Layout - Galaxy
Testing ui for Galaxy.
Example
Book with Complete Confidence
We've been in the business for over 20 years
Check out all of our great reasons to book
USP 1
USP 1
USP 1
USP 1
Popular Holidays
Incredible hand selected deals to suit your budget
<div class="bkg-liquid">
<div class="jumbo jumbo--underlay jumbo--underlay-t-b jumbo--pad jumbo--min-xxxl Rmgn--b" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="page page--xl">
<div class="jumbo__content">
<header class="app-header Rpad--t Rpad--b bg-grey-0 bs-b-dark-sm relative ">
<div class="page page--xl">
<div class="flex flex--no-wrap flex--distribute flex--align-center flex--has-gap ">
<div class="flex--fill">
<div class="flex flex--align-center flex--has-gap flex--fill flex--no-wrap">
<a href="/" class="hover hover--scale">
<img src="../demos/Galaxy_logo_v2.png" alt="Brand logo" class="img-h-h1" />
</a>
<div><img src="../demos/atol.svg" class="img-h-h1" /></div>
</div>
</div>
<div>
<div class="flex flex--distribute flex--has-gap flex--fill flex--no-wrap rounded flex--align-center">
<div class="hide hide--until-lg">
<div class="min-h-full flex flex--align-center flex--has-gap">
<a href="/">Home</a>
<a role="button">About</a>
<a href="contact">Contact</a>
<a href="/deals">Special Offers</a>
</div>
</div>
<a class="block-link flex flex--align-center" href="tel:@StateContainerService.ContactNumber">
<div class="flex flex--align-center mgn-sm--r">
<div class="btn btn--md btn--brand-1 ">
<i class="icon-phone color-grey-0 animate--call"></i>
</div>
</div>
<div class="flex flex--fill flex--align-center">
<div class="hide hide--until-lg color-brand-1">
<strong class="h3">0123 456 7890</strong>
<div class="tag tag--sm rounded bg-grey-3"><strong>Open 7am until late every day!</strong></div>
</div>
</div>
</a>
<div class="hide hide--after-lg">
<button class="btn btn--transparent"><i class="icon-menu h1"></i></button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="Rpad align-center">
<h1><strong class="font-2 text-xl stroke-white-sm color-brand-2 ts-dark-md">Some Page Title Goes Here</strong></h1>
</div>
<div class="Rpad align-center">
<a class="Rmgn--t btn btn--positive">Check Out Our Latest Deals</a>
</div>
</div>
</div>
</div>
<div class="page page--md Rpad--b Rpad--t Rmgn--b">
<section class="Rmgn--b align-center">
<div class="Rmgn--b">
<h1><strong>Book with Complete Confidence</strong></h1>
<h2 class="color-grey-7">We've been in the business for over 20 years</h2>
<h3 class="color-grey-5"><em>Check out all of our great reasons to book</em></h2>
</div>
<div class="flex flex--wrap full-width zebra zebra--grey-1">
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
<div class="flex flex--align-center flex--is-column flex--justify-center flex--fill pad">
<strong class="h1 icon-airplane color-brand-1"></strong>
<div>USP 1</div>
</div>
</div>
</section>
</div>
<div class="page page--xl Rmgn--b Rpad--b Rpad--t">
<div class="Rmgn--b align-center">
<h1><strong>Popular Holidays</strong></h1>
<h2>Incredible hand selected deals to suit your budget</h2>
</div>
<div class="grid">
<div class="grid__col grid__col-lg-6 relative" >
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class="color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t bs-dark-sm">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<div class="grid Rmgn--b">
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
</div>
<div class="grid">
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
<div class="grid__col grid__col-lg-6">
<a class="bs-medium-sm no-decoration hover hover--bg-scale flex flex--is-column flex--align-center relative Rpad flex--justify-center flex--distribute img--bg full-height" style='background-image: url("kss-assets/images/demo.jpg");'>
<div class=" color-grey-0 align-center">
<h2><strong class="font-2 text-uppercase stroke-white-sm color-brand-1 ts-dark-sm">Deal Header</strong></h4>
<h4 class="ts-dark-sm">Deal Content Sub-Header</h4>
</div>
<div class="btn btn--brand-2 Rmgn--t">View This Deal</div>
</a>
</div>
</div>
</div>
</div>
<div class="align-center">
<a class="Rmgn--t btn btn--positive">More like this</a>
</div>
</div>
</div>