- Taxonomic name: M-STEP-BY-STEP
- Added on: v2023.01 (20/09/23)
- Updated on: v2023.01 (20/09/23)
Step by step
This component display an ordered list of steps to do
Design and usage
- ...
- ...
Examples
Interactive example
Code example
<div class="l-columns l-columns--2-large m-step-by-step">
<picture class="l-columns__column m-step-by-step__img">
<source
type="image/svg+xml"
media="(min-width: 960px)"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-dk.svg"
width="600"
height="339"
>
<source
type="image/svg+xml"
media="(min-width: 560px)"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-tb.svg"
width="615"
height="346"
>
<source
type="image/svg+xml"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-mb.svg"
width="320"
height="215"
>
<img src="./assets/framework/images/examples/step-by-step/card-step-by-step-dk.jpg" decoding="async"
width="600" height="339" alt="img alternative text example">
</picture>
<ul class="l-columns__column m-step-by-step__list" role="list">
<li class="m-step-by-step__item">
Lorem ipsum dolor est
<a href="#" class="a-button a-button--primary u-margin--top-4">
lorem ipsum
</a>
</li>
<li class="m-step-by-step__item">
Lorem ipsum dolor sit amet consectetur adipisicing
</li>
<li class="m-step-by-step__item">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum deleniti ratione
</li>
</ul>
</div>
Interactive example
Code example
<div class="l-columns l-columns--2-large m-step-by-step">
<picture class="l-columns__column m-step-by-step__img">
<source
type="image/svg+xml"
media="(min-width: 960px)"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-dk.svg"
width="600"
height="339"
>
<source
type="image/svg+xml"
media="(min-width: 560px)"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-tb.svg"
width="615"
height="346"
>
<source
type="image/svg+xml"
srcset="./assets/framework/images/examples/step-by-step/card-step-by-step-mb.svg"
width="320"
height="215"
>
<img src="./assets/framework/images/examples/step-by-step/card-step-by-step-dk.jpg" decoding="async"
width="600" height="339" alt="img alternative text example">
</picture>
<ul class="l-columns__column m-step-by-step__list m-step-by-step__list--alphabetic" role="list">
<li class="m-step-by-step__item">
Lorem ipsum dolor est
<a href="#" class="a-button a-button--primary u-margin--top-4">
lorem ipsum
</a>
</li>
<li class="m-step-by-step__item">
Lorem ipsum dolor sit amet consectetur adipisicing
</li>
<li class="m-step-by-step__item">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum deleniti ratione
</li>
</ul>
</div>
Development and test
Notes for developers
...
Notes for testers
...
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-step-by-step
|
Base style for step by step | Yes | div.l-columns.l-columns--2-large |
|
.m-step-by-step__img
|
Style for step by step picture and image | Yes | .m-step-by-step > picture.l-columns__column |
|
.m-step-by-step__list
|
Style for step by step list container | Yes | .m-step-by-step > ul.l-columns__column |
|
.m-step-by-step__list--alphabetic
|
Change numeric counter of list for alphabetic | .m-step-by-step__list |
||
.m-step-by-step__item
|
Style for step by step list item | Yes | ul.l-columns__column > li |