<gov-stepper size="m">
<gov-stepper-item color="success">
<gov-icon type="templates" name="check-lg" slot="prefix"></gov-icon>
<h3 slot="headline">Hotový krok</h3>
</gov-stepper-item>
<gov-stepper-item color="success">
<gov-icon type="templates" name="check-lg" slot="prefix"></gov-icon>
<h3 slot="headline">Hotový krok</h3>
</gov-stepper-item>
<gov-stepper-item color="primary" active>
<span slot="prefix">3</span>
<h3 slot="headline">Aktivní krok</h3>
<p slot="annotation">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ipsum massa, ullamcorper in, auctor et.</p>
<div slot="content">
<p>
<picture>
<source srcset='/assets/man.avif' type='image/avif'>
<source srcset='/assets/man.webp' type='image/webp'><img src='/assets/man.jpg' alt='' width='400' height='267' class='gov-responsive-img' />
</picture><br>Mauris tincidunt sem sed arcu. Nulla est. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Fusce tellus. Maecenas lorem. Nam quis nulla. Ut tempus purus at lorem. Quisque porta. Vivamus porttitor turpis ac leo.
</p>
</div>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">4</span>
<h3 slot="headline">Nadcházející krok</h3>
</gov-stepper-item>
<gov-stepper-item color="primary">
<span slot="prefix">5</span>
<h3 slot="headline">Nadcházející krok</h3>
</gov-stepper-item>
</gov-stepper>
<gov-stepper size="{{ size }}">
{{#each stepper}}
<gov-stepper-item color="{{ color }}"{{#if active}} active{{/if}}>
{{#if icon}}
{{ render '@icon' icon }}
{{/if}}
{{#if prefix}}
<span slot="prefix">{{ prefix }}</span>
{{/if}}
{{ render '@heading' heading }}
{{#if annotation}}
<p slot="annotation">{{ annotation }}</p>
{{/if}}
{{#if content}}
<div slot="content">
<p>{{{ content }}}</p>
</div>
{{/if}}
</gov-stepper-item>
{{/each}}
</gov-stepper>
{
"size": "m",
"stepper": [
{
"color": "success",
"icon": {
"slot": "prefix",
"type": "templates",
"name": "check-lg"
},
"headline": "Hotový krok",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Hotový krok"
}
},
{
"color": "success",
"icon": {
"slot": "prefix",
"type": "templates",
"name": "check-lg"
},
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Hotový krok"
}
},
{
"color": "primary",
"active": true,
"prefix": "3",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Aktivní krok"
},
"annotation": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ipsum massa, ullamcorper in, auctor et.",
"content": "<picture><source srcset='/assets/man.avif' type='image/avif'><source srcset='/assets/man.webp' type='image/webp'><img src='/assets/man.jpg' alt='' width='400' height='267' class='gov-responsive-img' /></picture><br>Mauris tincidunt sem sed arcu. Nulla est. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Fusce tellus. Maecenas lorem. Nam quis nulla. Ut tempus purus at lorem. Quisque porta. Vivamus porttitor turpis ac leo."
},
{
"color": "primary",
"prefix": "4",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Nadcházející krok"
}
},
{
"color": "primary",
"prefix": "5",
"heading": {
"slot": "headline",
"tag": "h3",
"name": "Nadcházející krok"
}
}
]
}
.gov-stepper-item[active], gov-stepper-item[active] {
.gov-stepper-item__prefix, *[slot="prefix"]:not([hydrated]) {
background: var(--background-primary);
color: var(--text-white-fixed);
}
}
No notes defined.