Dependencies
This layout uses the following components as "atoms" to create the full UI.
Optional: Components:Scroller
Basic horizontal scroller element. Usually used with the card component.
- 1
- 2
- 3
- 4
- 5
- 6
<div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
1
</div>
</li>
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
2
</div>
</li>
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
3
</div>
</li>
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
4
</div>
</li>
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
5
</div>
</li>
<li class="c-scroller__item">
<div class="u-flex u-align-middle u-justify-center u-radius-lg u-bg-ui-300 u-w-18 u-h-8">
6
</div>
</li>
</ul>
</div>
</div>Card Sizes
There are a number of predefined card sizes for use with the scroller component. All designed to fit numerous cases, and resize accordingly for mobile and tablet.
<div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_1">
1
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_2">
2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_3">
3
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_4">
4
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_5">
5
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_6">
6
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_7">
7
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_8">
8
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_9">
9
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_10">
10
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_11">
11
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_12">
12
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_13">
13
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_14">
14
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_15">
15
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_16">
16
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_17">
17
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xs | u-h-5 u-flex u-align-middle u-justify-center" href="#xs_18">
18
</a>
</li></ul>
</div>
</div><div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_1">
1
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_2">
2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_3">
3
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_4">
4
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_5">
5
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_6">
6
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_7">
7
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_8">
8
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_9">
9
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_10">
10
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_11">
11
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--sm | u-h-5 u-flex u-align-middle u-justify-center" href="#sm_12">
12
</a>
</li></ul>
</div>
</div><div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_1">
1
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_2">
2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_3">
3
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_4">
4
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_5">
5
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_6">
6
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_7">
7
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_8">
8
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_9">
9
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--md | u-h-5 u-flex u-align-middle u-justify-center" href="#md_10">
10
</a>
</li></ul>
</div>
</div><div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_1">
1
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_2">
2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_3">
3
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_4">
4
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_5">
5
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-h-5 u-flex u-align-middle u-justify-center" href="#lg_6">
6
</a>
</li></ul>
</div>
</div><div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_1">
1
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_2">
2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_3">
3
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_4">
4
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_5">
5
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--xl | u-h-5 u-flex u-align-middle u-justify-center" href="#xl_6">
6
</a>
</li></ul>
</div>
</div>Feature Scroller
Scroller component, with a feature sized first card followed by 2 row normal sized cards.
<div class="o-wrapper">
<div class="c-scroller">
<ul class="c-scroller__list">
<li class="c-scroller__item">
<a class="c-card c-card--feature | u-flex u-align-middle u-justify-center" href="#featured">
Featured
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_1:1">
Col:1 Card:1
</a>
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_1:2">
Col:1 Card:2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_2:1">
Col:2 Card:1
</a>
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_2:2">
Col:2 Card:2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_3:1">
Col:3 Card:1
</a>
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_3:2">
Col:3 Card:2
</a>
</li>
<li class="c-scroller__item">
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_4:1">
Col:4 Card:1
</a>
<a class="c-card c-card--lg | u-flex u-align-middle u-justify-center" href="#featured_md_4:2">
Col:4 Card:2
</a>
</li>
</ul>
</div>
</div>