ŠKODA Försäkring är en del av If Skadeförsäkring AB (publ). Säte: Stockholm. Org.nr: 516401-8102.
ŠKODA Försäkring är ett samarbete med Volkswagen Finans Sverige AB.
Structures
Card Grid
Card Grid Contact
This is a grid containing contact information.
- You can make grid content vertical top aligned instead of default middle/center with property
top-aligned - You can remove borders with property
no-border - You can remove background color with property
transparent
Öppettider
Måndag-Fredag
07.30 - 20.00
Lördag och Söndag
09.00 - 16.00
Faxa
Skadeärenden
<div data-am-cardgrid="two-col">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-clock m-r-half"></i>Öppettider</h3>
<div class="m-b">
<div class="text-lighten">Måndag-Fredag</div>
<div>07.30 - 20.00</div>
</div>
<div>
<div class="text-lighten">Lördag och Söndag</div>
<div>09.00 - 16.00</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-phone m-r-half"></i>Ring</h3>
<div class="m-b">
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">031-345 69 00</a>
</div>
</div>
<div>
<div class="text-lighten">Övriga ärenden</div>
<div>
<a href="#" title="" data-am-link="underline">031-345 67 00</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-message m-r-half"></i>Mejla</h3>
<div class="m-b">
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">Skadeservice</a>
</div>
</div>
<div>
<div class="text-lighten">Övriga ärenden</div>
<div>
<a href="#" title="" data-am-link="underline">Kundservice</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-printer m-r-half"></i>Faxa</h3>
<div>
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">08-541 702 61</a>
</div>
</div>
</div>
</div>
</div>
</div>Card Grid Contact Compact
This is a grid containing contact information.
Öppettider
Måndag-Fredag
07.30 - 20.00
Lördag 09.00-18.00
Söndag 10.00-18.00
Ring
Faxa
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Öppettider</h5>
<div class="m-b-mini">
<div>Måndag-Fredag</div>
<div>07.30 - 20.00</div>
</div>
<div>
<div>Lördag 09.00-18.00</div>
<div>Söndag 10.00-18.00</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Ring</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">031-345 69 00</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Mejla</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">Mejla skadecenter</a>
</div>
</div>
<div>
<div>
<a href="#" title="">Mejla kundcenter </a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Faxa</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">08-541 702 61</a>
</div>
</div>
</div>
</div>
</div>
</div>Card Grid Start
This is a grid that can contain anything.
Anmäl Skada
Vi gör det enkelt för dig när du har råkat ut för en skada. I de flesta fall behöver du bara kontakta oss en gång. Vi sköter resten.
<div data-am-cardgrid>
<div class="grid-row">
<div class="grid-item">
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div style="width: 470px;">
<div data-am-itemcard="placeholder">
<a href="#" title="" class="item-image-wrapper">
<div class="item-notification-container">
<span data-am-notification="inline" data-count="1"></span> Ny händelse
</div>
<div class="item-image-container">
<div class="item-image-missing">
<img src="/assets/toolkit/images/item_placeholder.png" alt="" class="item-image" />
<div class="item-image-name">ABC 123</div>
</div>
</div>
<div class="item-info-container">
<div>Volvia Halvförsäkring</div>
<div class="font-bold">V90 D4 – DEF 456</div>
<div>Månadskostnad 310 kr</div>
</div>
</a>
</div>
</div>
</div>
<div class="grid-item">
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div style="width: 470px;">
<div data-am-itemcard="actual">
<a href="#" title="" class="item-image-wrapper">
<div class="item-notification-container">
<span data-am-notification="inline" data-count="1"></span> Ny händelse
</div>
<div class="item-image-container">
<div class="item-image-missing">
<img src="http://vds.spark-vision.com/vds_se_my17/public_temp/composed/m_0/d_1/1920_820/offs_x_5/bgc_00FFFFFF/q_100/f_5/0_0/0_0/0-5_0-5/ac_0/937_400/A/6/F/1/D/A6F1D3BF9301D48FE62B741646BBA2B0.png" alt="" class="item-image" />
<div class="item-image-name">ABC 123</div>
</div>
</div>
<div class="item-info-container">
<div>Volvia Halvförsäkring</div>
<div class="font-bold">V90 D4 – DEF 456</div>
<div>Månadskostnad 310 kr</div>
</div>
</a>
</div>
</div>
</div>
<div class="grid-item" style="background-image: url(/assets/toolkit/images/card_grid_bg.jpg);">
<div class="grid-item-content">
<div data-am-columnrow="always" class="m-b">
<div class="column">
<h3 class="text-lighten no-margin">Anmäl Skada</h3>
</div>
<div class="column hidden-md">
<a href="#" data-am-link="big">Skadeanmälan<i class="icon-right-open m-l-mini"></i></a>
</div>
</div>
<div class="text-bigger text-lighten">Vi gör det enkelt för dig när du har råkat ut för en skada. I de flesta fall behöver du bara kontakta oss en gång. Vi sköter resten.</div>
<div class="m-t hidden-lt-md">
<a href="#" title="" data-am-link="big underline">Skadeanmälan</a>
</div>
</div>
</div>
</div>
</div>Card Grid Insurance List Single
This is a card grid used to list insurance items. Add class single to <div data-am-cardgrid></div> when there is only one grid item.
<div data-am-cardgrid="single">
<div class="grid-row">
<div class="grid-item">
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div style="width: 470px;">
<div data-am-itemcard>
<a href="#" title="">
<div class="item-notification-container">
<span data-am-notification="inline" data-count="1"></span> Ny händelse
</div>
<div class="item-image-container">
<img src="/assets/toolkit/images/item_card_car.png" alt="" class="item-image" />
</div>
<div class="item-info-container">
<div>Volvia Halvförsäkring</div>
<div class="font-bold">V90 D4 – DEF 456</div>
<div>Månadskostnad 310 kr</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>Card Grid Insurance List
This is a card grid used to list insurance items. Add class single to <div data-am-cardgrid></div> when there is only one grid item.
<div data-am-cardgrid>
<div class="grid-row">
<div class="grid-item">
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div style="width: 470px;">
<div data-am-itemcard>
<a href="#" title="">
<div class="item-notification-container">
<span data-am-notification="inline" data-count="1"></span> Ny händelse
</div>
<div class="item-image-container">
<img src="/assets/toolkit/images/item_card_car.png" alt="" class="item-image" />
</div>
<div class="item-info-container">
<div>Volvia Halvförsäkring</div>
<div class="font-bold">V90 D4 – DEF 456</div>
<div>Månadskostnad 310 kr</div>
</div>
</a>
</div>
</div>
</div>
<div class="grid-item">
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div style="width: 470px;">
<div data-am-itemcard>
<a href="#" title="">
<div class="item-notification-container">
<span data-am-notification="inline" data-count="1"></span> Ny händelse
</div>
<div class="item-image-container">
<img src="/assets/toolkit/images/item_card_car.png" alt="" class="item-image" />
</div>
<div class="item-info-container">
<div>Volvia Halvförsäkring</div>
<div class="font-bold">V90 D4 – DEF 456</div>
<div>Månadskostnad 310 kr</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>Card Grid Sitemap
This is a grid containing sitemap.
Tips och råd
Kundfördelar
Kundservice
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Tips och råd</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Bilresa</a></div>
<div><a href="#" title="" data-am-link="current-color small">Däck</a></div>
<div><a href="#" title="" data-am-link="current-color small">Köpa Skoda</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundfördelar</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Vagnskadegaranti</a></div>
<div><a href="#" title="" data-am-link="current-color small">Kundfördelar</a></div>
<div><a href="#" title="" data-am-link="current-color small">Helkundserbjudande</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundservice</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Grönt Kort</a></div>
<div><a href="#" title="" data-am-link="current-color small">Villkor</a></div>
<div><a href="#" title="" data-am-link="current-color small">Självrisk</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vanliga frågor</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Om oss</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Om Skoda försäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Finansförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Företagsförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vår adress</a></div>
</div>
</div>
</div>
</div>
</div>Claims
No Claims With Car
This structure is used to show claims table when no claims are available for particular insurance.
ABC 123
Škoda Superb
You have no claims
<div data-am-insurance-claims-block>
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="no-claims text-center">
<div class="no-claims-title">You have no claims</div>
<div class="no-claims-button m-t-quarter">
<a href="#" data-am-button="secondary uppercase">Anmäl skada</a>
</div>
</div>
</div>Claims Table With Car
This structure is used to show claims table for particular insurance.
ABC 123
Škoda Superb
Date
Type
Hyrbil
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krTrack My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krHyrbil genom Stor BilextraHyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.Track My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krHyrbil genom Stor BilextraHyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.Track My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krTrack My ClaimSome descripion about TrackMyClaim.
Load all claims
<div data-am-insurance-claims-block>
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="hidden-lt-md claims-history-header header-row font-regular">
<div class="col-md-3">
<div>Date</div>
</div>
<div class="col-md-3h">
<div>Type</div>
</div>
<div class="col-md-3h">
<div>Hyrbil</div>
</div>
</div>
<div class="claims-container">
<ul>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold"> </span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Hyrbil genom Stor Bilextra</span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div class="col-sm-6 heading">
<div class="car-hire-label">Hyrbil</div>
<div class="car-hire-text">Hyrbil genom Stor Bilextra</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Hyrbil genom Stor Bilextra</div>
<div class="car-hire-desctiption">Hyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.</div>
</div>
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Hyrbil genom Stor Bilextra</span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div class="col-sm-6 heading">
<div class="car-hire-label">Hyrbil</div>
<div class="car-hire-text">Hyrbil genom Stor Bilextra</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Hyrbil genom Stor Bilextra</div>
<div class="car-hire-desctiption">Hyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.</div>
</div>
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold"> </span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
</ul>
<div class="header-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-claims-display-all-link>Load all claims</span>
</div>
</div>
</div>
</div>Claims Table With Car Limited
This structure is used to show claims table for particular insurance.
ABC 123
Škoda Superb
Date
Type
Hyrbil
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krTrack My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krHyrbil genom Stor BilextraHyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.Track My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krHyrbil genom Stor BilextraHyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.Track My ClaimSome descripion about TrackMyClaim.
-
Reference: EXY352 15640212Reference: EXY352 15640212MomentSjälvriskTrafik0 krGlasSe villkorVagnskada4 000 krStöld2 500 krBrand1 200 krSjälvrisk att betala7 735 krTrack My ClaimSome descripion about TrackMyClaim.
Load all claims
<div data-am-insurance-claims-block="limit-records-3">
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="hidden-lt-md claims-history-header header-row font-regular">
<div class="col-md-3">
<div>Date</div>
</div>
<div class="col-md-3h">
<div>Type</div>
</div>
<div class="col-md-3h">
<div>Hyrbil</div>
</div>
</div>
<div class="claims-container">
<ul>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold"> </span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Hyrbil genom Stor Bilextra</span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div class="col-sm-6 heading">
<div class="car-hire-label">Hyrbil</div>
<div class="car-hire-text">Hyrbil genom Stor Bilextra</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Hyrbil genom Stor Bilextra</div>
<div class="car-hire-desctiption">Hyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.</div>
</div>
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Hyrbil genom Stor Bilextra</span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div class="col-sm-6 heading">
<div class="car-hire-label">Hyrbil</div>
<div class="car-hire-text">Hyrbil genom Stor Bilextra</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Hyrbil genom Stor Bilextra</div>
<div class="car-hire-desctiption">Hyrbil ingår max 60 dagar under reparationstid. Du får ersättning för 75% av dygns- och kilometerkostnaden.</div>
</div>
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
<li data-am-insurance-claims-item>
<div class="header-row hidden-lt-md">
<div class="col-md-3">
<span class="">2018-07-13</span>
</div>
<div class="col-md-3h">
<span class="name text-bold">Maskinskada</span>
</div>
<div class="col-md-3h">
<span class="name text-bold"> </span>
</div>
<div class="col-md-2 text-right">
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="details-link">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
</div>
<div class="header-row hidden-md">
<div class="col-sm-6 heading">
<div class="date-label">Date</div>
<div class="date-text">2018-07-13</div>
</div>
<div class="col-sm-6 heading">
<div class="type-label">Type</div>
<div class="type-text">Maskinskada</div>
</div>
<div data-am-link="primary-color no-decoration" data-am-claims-details-link class="col-12 details-link heading">
<span class="details-show-link">Details</span>
<span class="details-hide-link">Hide details</span>
</div>
</div>
<div data-am-insurance-claims-details>
<div class="hidden-lt-md text-right reference-row">
<span class="reference-label">Reference: </span>
<span class="reference-text">EXY352 15640212</span>
</div>
<div class="hidden-md reference-row"><span class="reference-label">Reference:</span> EXY352 15640212</div>
<div class="col-md-offset-0h col-md-6 clear-padding-x damage-list-wrapper">
<div data-am-tablelist>
<div class="list">
<div class="list-item car-hire-heading font-regular">
<div class="list-column details-column-moment">Moment</div>
<div class="list-column details-column-selfrisk">Självrisk</div>
</div>
<div class="list-item">
<div class="list-column">Trafik</div>
<div class="list-column">0 kr</div>
</div>
<div class="list-item">
<div class="list-column">Glas</div>
<div class="list-column">Se villkor</div>
</div>
<div class="list-item">
<div class="list-column">Vagnskada</div>
<div class="list-column">4 000 kr</div>
</div>
<div class="list-item">
<div class="list-column">Stöld</div>
<div class="list-column">2 500 kr</div>
</div>
<div class="list-item">
<div class="list-column">Brand</div>
<div class="list-column">1 200 kr</div>
</div>
<div class="list-item font-bold">
<div class="list-column">Självrisk att betala</div>
<div class="list-column">7 735 kr</div>
</div>
</div>
</div>
</div>
<div class="car-hire-wrapper clear-padding-x col-md-offset-0h col-md-5">
<div class="m-b-half m-x-clear row">
<div class="car-hire-heading font-regular">Track My Claim</div>
<div class="car-hire-desctiption">Some descripion about TrackMyClaim.</div>
<div class="col-sm-6 clear-padding-x tmc-button-wrapper">
<a href="#" data-am-button="primary compact full-width text-center">Open Claim Details</a>
</div>
</div>
</div>
</div>
<!-- <div class="bottom-row hidden-md">
</div> -->
</li>
</ul>
<div class="header-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-claims-display-all-link>Load all claims</span>
</div>
</div>
</div>
</div>Claims Overview
This structure is used as claims overview on Overview/Start page.
<div data-am-card="full-width" data-am-claimsoverview>
<div class="col-12 p-y-alt">
<div class="col-sm-6 no-padding">
<div class="empty-char-before lh-04 hidden-lt-sm"></div>
<h3 class="block-header table-title">Skador</h3>
</div>
<div class="col-sm-6 no-padding text-right">
<a href="" data-am-button="secondary full-width-lt-sm text-center">ANMÄL SKADA</a>
</div>
</div>
<div class="col-12 no-padding">
<div data-am-tablelist="no-background claims-overview">
<div class="list">
<a href="#" title="" class="list-item">
<div class="list-column label-regnum">DEF 456</div>
<div class="list-column label-carmodel">ŠKODA FABIA</div>
<div class="list-column">Glasskada</div>
<div class="list-column label-date">2018-XX-XX</div>
</a>
<a href="#" title="" class="list-item">
<div class="list-column label-regnum">DEF 456</div>
<div class="list-column label-carmodel">ŠKODA KODIAQ</div>
<div class="list-column">Kollision med annat fordon</div>
<div class="list-column label-date">2018-XX-XX</div>
</a>
<a href="#" title="" class="list-item">
<div class="list-column label-regnum">ABC 123</div>
<div class="list-column label-carmodel">ŠKODA RAPID Spaceback</div>
<div class="list-column">Glasskada</div>
<div class="list-column label-date">2018-XX-XX</div>
</a>
</div>
</div>
</div>
<div class="col-12 p-y-alt">
<a href="" data-am-link="current-color small hover-primary no-decoration" class="font-bold see-all-claims">SE ALLA ANMÄLDA SKADOR</a>
</div>
</div>Claims Overview Empty
This structure is used as claims overview on Overview/Start page.
<div data-am-card="full-width" data-am-claimsoverview>
<div class="col-12 p-y-alt">
<div class="col-sm-6 no-padding">
<div class="empty-char-before lh-04 hidden-lt-sm"></div>
<h3 class="block-header table-title">Skador</h3>
</div>
<div class="col-sm-6 no-padding text-right">
<a href="" data-am-button="secondary full-width-lt-sm text-center">ANMÄL SKADA</a>
</div>
</div>
<div class="col-12 no-padding">
<div data-am-tablelist="no-background claims-overview no-claims">
<div class="list">
<div class="list-item">
<div class="list-column">Du har inga pågående skadeärenden.</div>
</div>
</div>
</div>
</div>
<div class="col-12 p-y-alt">
<a href="" data-am-link="current-color small hover-primary no-decoration" class="font-bold see-all-claims">SE ALLA ANMÄLDA SKADOR</a>
</div>
</div>Contact Block
Contact Block
This structure is used to display contact information.
Vill du fråga oss om något?
Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.
Öppettider
Måndag-Fredag
07.30 - 20.00
Lördag och Söndag
09.00 - 16.00
Faxa
Skadeärenden
<div class="contact-info-wrapper">
<div class="container m-b-half">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Vill du fråga oss om något?</h2>
<div class="text-bigger text-lighten">Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.</div>
</div>
</div>
</div>
<div class="container ignore-gutter-lt-md">
<div data-am-cardgrid="two-col">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-clock m-r-half"></i>Öppettider</h3>
<div class="m-b">
<div class="text-lighten">Måndag-Fredag</div>
<div>07.30 - 20.00</div>
</div>
<div>
<div class="text-lighten">Lördag och Söndag</div>
<div>09.00 - 16.00</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-phone m-r-half"></i>Ring</h3>
<div class="m-b">
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">031-345 69 00</a>
</div>
</div>
<div>
<div class="text-lighten">Övriga ärenden</div>
<div>
<a href="#" title="" data-am-link="underline">031-345 67 00</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-message m-r-half"></i>Mejla</h3>
<div class="m-b">
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">Skadeservice</a>
</div>
</div>
<div>
<div class="text-lighten">Övriga ärenden</div>
<div>
<a href="#" title="" data-am-link="underline">Kundservice</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h3 class="text-lighten m-b"><i class="icon-printer m-r-half"></i>Faxa</h3>
<div>
<div class="text-lighten">Skadeärenden</div>
<div>
<a href="#" title="" data-am-link="underline">08-541 702 61</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Contact Block Compact
This structure is used to display contact information.
Öppettider
Måndag-Fredag
07.30 - 20.00
Lördag 09.00-18.00
Söndag 10.00-18.00
Ring
Faxa
<div class="contact-info-wrapper">
<div class="container half-padded ignore-gutter-lt-sm">
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Öppettider</h5>
<div class="m-b-mini">
<div>Måndag-Fredag</div>
<div>07.30 - 20.00</div>
</div>
<div>
<div>Lördag 09.00-18.00</div>
<div>Söndag 10.00-18.00</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Ring</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">031-345 69 00</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Mejla</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">Mejla skadecenter</a>
</div>
</div>
<div>
<div>
<a href="#" title="">Mejla kundcenter </a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Faxa</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">08-541 702 61</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Flex Grid
Background Image
This is a grid that can contain anything. promo attribute just sets styling for the cards
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
<div data-am-flexgrid="three-col-md promo">
<div class="grid-item">
<div class="image-wrapper">
<div class="image" style="background-image: url('http://placehold.it/370x230');"></div>
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
<div class="grid-item">
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
<div class="grid-item">
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.</div>
</div>
</div>
<div class="grid-item">
<div class="image-wrapper">
<div class="image" style="background-image: url('http://placehold.it/400x200');"></div>
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.</div>
</div>
</div>
<div class="grid-item">
<div class="image-wrapper">
<div class="image" style="background-image: url('http://placehold.it/450x180');"></div>
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
</div>Block Image
This is a grid that can contain anything. promo attribute just sets styling for the cards
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
<div data-am-flexgrid="three-col-md promo block-image no-border">
<div class="grid-item">
<div class="image-wrapper">
<img src="http://placehold.it/370x230" alt="" class="image" />
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
<div class="grid-item">
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
<div class="grid-item">
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.</div>
</div>
</div>
<div class="grid-item">
<div class="image-wrapper">
<img src="http://placehold.it/370x230" alt="" class="image" />
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ex metus, auctor id nulla a, faucibus dictum orci. Nulla vitae quam sodales, condimentum sapien a, ultrices purus. Suspendisse potenti.</div>
</div>
</div>
<div class="grid-item">
<div class="image-wrapper">
<img src="http://placehold.it/370x230" alt="" class="image" />
</div>
<div class="content-wrapper">
<h3 class="promo-header">Lorem ipsum</h3>
<div class="promo-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
<div class="link-wrapper">
<a href="#" title="Läs mer" data-am-link="underline">Läs mer</a>
</div>
</div>
</div>
</div>Imf Structures
Imf Footer
This structure is used to display IMF brands full footer.
Kundservice
Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.
Vill du fråga oss om något?
Du kan alltid mejla din fråga till oss, vi besvarar ditt mejl så snabbt vi kan. Behöver du prata med oss angående en skada kan du ringa oss dygnet runt 0770-110 350.
Tack!
Vi ringer dig!
Tack för ditt meddelande! Vi svarar så snabbt som möjligt!
Något gick fel. Ring oss istället.
Öppettider
Måndag-Fredag
07.30 - 20.00
Lördag 09.00-18.00
Söndag 10.00-18.00
Ring
Faxa
<div data-am-footer-wrapper="bg-white imf">
<div data-am-customerservice class="customer-service-wrapper">
<div class="container p-b">
<div class="customer-service-logo-container">
<img src="/assets/toolkit/images/skoda/kundservice-portrait.png" alt="Customer service" class="customer-service-logo" />
</div>
<h4 class="customer-service-title m-t-mini">Kundservice</h4>
<div class="customer-service-main-block">
<p class="customer-service-text">Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.</p>
</div>
</div>
</div>
<div data-am-tab="customer-service imf" class="contact-forms-wrapper">
<div class="tab-row-wrapper">
<div class="container">
<ul class="tab-row">
<li class="tab-row-item">
<button data-am-button="secondary tabbed-top" class="is-active" data-am-tab-item data-am-tab-item-id="tab-contact-us">Kontakta oss</button>
</li>
<li class="tab-row-item">
<button data-am-button="secondary tabbed-top" data-am-tab-item data-am-tab-item-id="tab-mail-us">Meijl oss</button>
</li>
</ul>
</div>
</div>
<div class="container m-t">
<div class="tab-content-wrapper">
<div id="tab-contact-us" class="tab-content is-open">
<div data-am-form-callback>
<form class="form">
<h4>Vill du bli uppringd?</h4>
<div class="row m-b-half">
<div class="col-12 queue-selection">
<div data-am-inputselection="radio" class="">
<input data-val="true" data-val-required="Välj typ av ärende" id="radio-callback-0" name="QueueType" type="radio" value="Claims" tabindex="0">
<label for="radio-callback-0"><span class="text">Skadeärenden</span></label>
</div>
<div data-am-inputselection="radio" class="">
<input id="radio-callback-1" name="QueueType" type="radio" value="Sales" tabindex="0">
<label for="radio-callback-1"><span class="text">Övriga ärenden</span></label>
</div>
</div>
<div class="col-12 queue-selection-error">
<span class="field-validation-error" data-valmsg-for="QueueType" data-valmsg-replace="true"><span id="QueueType-error" class="">Välj typ av ärende</span></span>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-lg-3 m-b-half">
<div data-am-inputtext>
<label for="CustomerName">Ange ditt namn</label>
<input type="text" placeholder=" " id="CustomerName" />
</div>
</div>
<div class="col-sm-4 col-lg-3 m-b-half">
<div data-am-inputtext>
<label for="CustomerPhone">Ange nummer</label>
<input type="text" placeholder=" " id="CustomerPhone" />
</div>
</div>
<div class="col-sm-4 col-lg-3 m-b-half m-t-alt">
<!-- <div class="empty-char-before lh-19 hidden-lt-sm"></div> -->
<button data-am-button="primary" class="callback-button">Ring mig</button>
</div>
</div>
<div class="row">
<div class="col-12 m-b-half text-center-lt-sm">
<a data-am-link="primary-color" target="_blank" href="#">GDPR Link</a>
</div>
</div>
</form>
<div class="information information-closed">
<h4 class="text-center font-bold">Vill du fråga oss om något?</h4>
<div class="text-center">Du kan alltid mejla din fråga till oss, vi besvarar ditt mejl så snabbt vi kan. Behöver du prata med oss angående en skada kan du ringa oss dygnet runt 0770-110 350.</div>
</div>
<div class="information information-success">
<h4 class="text-center font-bold"><i class="material-icon-check text-bigger text-primary"></i> Tack!</h4>
<div class="text-center">Vi ringer dig!</div>
</div>
<div class="information information-error">
<h4 class="text-center font-bold">Ooops...</h4>
<div class="text-center">Ooops... Something went wrong</div>
<div class="text-center m-t-mini">
<a href="#" title="" data-am-link="primary-color">Try again</a>
</div>
</div>
</div>
</div>
<div id="tab-mail-us" class="tab-content">
<div data-am-form-mailus>
<div class="overlay">
<div data-am-spinner>
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66">
<circle class="spinner-stroke" fill="none" stroke="#000000" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<form class="form">
<div class="row m-b-half">
<div class="col-12">
Vad kan vi hjälpa till med?<br /> För att ärendet ska hamna rätt direkt och för att du ska få svar så snabbt
som möjligt ber vi dig välja ämne i menyn.<br /> Här kan du läsa om vår <a href="#" data-am-link="primary-color">hantering
av personuppgifter</a>
</div>
</div>
<div class="row m-b-half">
<div class="col-12 m-b-mini">
<div data-am-select="primary">
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="col-12">
Description for currently selected option. Subject to change.
</div>
</div>
<div class="row">
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="FirstName">Förnamn</label>
<input type="text" placeholder=" " id="FirstName" />
</div>
</div>
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="LastName">Efternamn</label>
<input type="text" placeholder=" " id="LastName" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="Address">Address</label>
<input type="text" placeholder=" " id="Address" />
</div>
</div>
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="Postcode">Postnummer</label>
<input type="text" placeholder=" " id="Postcode" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="City">Ort</label>
<input type="text" placeholder=" " id="City" />
</div>
</div>
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="SSN">Person- / Organisationsnummer</label>
<div data-am-tooltip="light-color" class="">
<div class="tooltip-btn">
<span class="btn-icon"><span class="material-icon-info-outline size-1-3rem"></span></span>
</div>
<div class="tooltip">
<div class="tooltip-content">
<div data-am-content="text-smaller">
<p>Vi kan ge dig snabbare service om du fyller i ditt person- eller organisationsnummer.</p>
</div>
</div>
<div class="tooltip-close-btn">
<i class="icon-cancel no-margin"></i>
</div>
</div>
<div class="ui-block"></div>
</div> <input type="text" placeholder=" " id="SSN" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="RegistrationNumber">Bilens registreringsnummer</label>
<input type="text" placeholder=" " id="RegistrationNumber" />
</div>
</div>
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="PhoneNumber">Ditt telefonnummer</label>
<input type="text" placeholder=" " id="PhoneNumber" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 m-b-half">
<div data-am-inputtext>
<label for="Email">Din mejladress</label>
<input type="text" placeholder=" " id="Email" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 m-b-half">
<div data-am-inputtext>
<label for="Message">Din fråga</label>
<textarea placeholder=" " id="Message"></textarea>
</div>
</div>
</div>
<div class="row text-right">
<div class="col-12">
<button data-am-button="primary" class="mailus-button">Skicka</button>
</div>
</div>
<div class="clear"></div>
</form>
<div class="information information-success">
<div class="text-center">Tack för ditt meddelande! Vi svarar så snabbt som möjligt!</div>
<div class="text-center m-t-mini">
<a href="#" title="" data-am-link="primary-color">Send another one</a>
</div>
</div>
<div class="information information-error">
<div class="text-center">Något gick fel. Ring oss istället.</div>
<div class="text-center m-t-mini">
<a href="#" title="" data-am-link="primary-color">Try again</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contact-info-wrapper">
<div class="container half-padded ignore-gutter-lt-sm">
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Öppettider</h5>
<div class="m-b-mini">
<div>Måndag-Fredag</div>
<div>07.30 - 20.00</div>
</div>
<div>
<div>Lördag 09.00-18.00</div>
<div>Söndag 10.00-18.00</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Ring</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">031-345 69 00</a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Mejla</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">Mejla skadecenter</a>
</div>
</div>
<div>
<div>
<a href="#" title="">Mejla kundcenter </a>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Faxa</h5>
<div class="m-b-mini">
<div>
<a href="#" title="">08-541 702 61</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-t-quarter footer-links-wrapper">
<div class="container half-padded">
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Tips och råd</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Bilresa</a></div>
<div><a href="#" title="" data-am-link="current-color small">Däck</a></div>
<div><a href="#" title="" data-am-link="current-color small">Köpa Skoda</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundfördelar</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Vagnskadegaranti</a></div>
<div><a href="#" title="" data-am-link="current-color small">Kundfördelar</a></div>
<div><a href="#" title="" data-am-link="current-color small">Helkundserbjudande</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundservice</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Grönt Kort</a></div>
<div><a href="#" title="" data-am-link="current-color small">Villkor</a></div>
<div><a href="#" title="" data-am-link="current-color small">Självrisk</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vanliga frågor</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Om oss</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Om Skoda försäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Finansförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Företagsförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vår adress</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-am-footer="imf" class="main-footer-wrapper">
<div class="container">
<div class="col-12 footer-logo-wrapper">
<a href="/" title="Hem" class="footer-logo-container">
<img src="/assets/toolkit/images/skoda/logo-footer.png" alt="Skoda Logo" class="footer-logo" data-styleguide-footer-logo />
</a>
</div>
<div class="col-12 footer-text-wrapper">
<div class="text-smaller footer-text">
<p>ŠKODA Försäkring är en del av If Skadeförsäkring AB (publ). Säte: Stockholm. Org.nr: 516401-8102. <br />
ŠKODA Försäkring är ett samarbete med Volkswagen Finans Sverige AB.</p>
</div>
</div>
<div class="col-12 footer-links-wrapper">
<ul class="footer-link-list text-smaller" data-am-list>
<li class="footer-link-item">
<a href="#" title="" data-am-link="primary-color">Om cookies</a>
</li>
<li class="footer-link-item">
<a href="#" title="" data-am-link="primary-color">Hantering av personuppgifter</a>
</li>
<li class="footer-link-item">
<a href="#" title="" data-am-link="primary-color">In English</a>
</li>
<li class="footer-link-item">
<a href="#" title="" data-am-link="primary-color">Kontakta oss</a>
</li>
</ul>
</div>
</div>
</div>
</div>Skoda Footer
This structure is used to display IMF brands full footer.
Kundservice
Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.
<div data-am-footer-wrapper="bg-white imf">
<div data-am-customerservice class="customer-service-wrapper">
<div class="container p-b">
<div class="customer-service-logo-container">
<img src="/assets/toolkit/images/skoda/kundservice-portrait.png" alt="Customer service" class="customer-service-logo" />
</div>
<h4 class="customer-service-title m-t-mini">Kundservice</h4>
<div class="customer-service-main-block">
<p class="customer-service-text">Ring oss eller skriv ett meddelande. Vi är snabba på att svara både i telefon och på mejl.</p>
<div data-am-cardgrid="compact no-border top-aligned transparent" class="col-md-10 col-md-offset-1 col-sm-6 col-sm-offset-3 no-padding-lt-md">
<div class="grid-row">
<div class="grid-item customer-service-button">
<button data-am-button="secondary-light full-width uppercase">Kontakta oss</button>
</div>
<div class="grid-item customer-service-button">
<button data-am-button="secondary-light full-width uppercase">Meijl oss</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-t-quarter footer-links-wrapper">
<div class="container half-padded">
<div data-am-cardgrid="four-col top-aligned compact no-border transparent">
<div class="grid-row">
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Tips och råd</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Bilresa</a></div>
<div><a href="#" title="" data-am-link="current-color small">Däck</a></div>
<div><a href="#" title="" data-am-link="current-color small">Köpa Skoda</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundfördelar</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Vagnskadegaranti</a></div>
<div><a href="#" title="" data-am-link="current-color small">Kundfördelar</a></div>
<div><a href="#" title="" data-am-link="current-color small">Helkundserbjudande</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Kundservice</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Grönt Kort</a></div>
<div><a href="#" title="" data-am-link="current-color small">Villkor</a></div>
<div><a href="#" title="" data-am-link="current-color small">Självrisk</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vanliga frågor</a></div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-item-content">
<h5 class="m-b-mini">Om oss</h5>
<div class="m-b-mini">
<div><a href="#" title="" data-am-link="current-color small">Om Skoda försäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Finansförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Företagsförsäkring</a></div>
<div><a href="#" title="" data-am-link="current-color small">Vår adress</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-am-footer="imf" class="main-footer-wrapper">
<div class="container">
<hr class="m-b">
<div class="row m-t-half">
<div class="col-sm-8 text-left">
<h5 class="font-bold ">Om Škoda Försäkring</h5>
<p>Škoda Försäkring är en skräddarsydd bilförsäkring för dig som äger och kör Skoda. Du får ett tryggt och
omfattande försäkringsskydd, utformat speciellt för Skoda-ägare. Škoda Försäkring finns för både
privatpersoner och företag och är lika smart och prisvärd som din Skoda.</p>
</div>
</div>
<hr class="m-b m-t-half">
<div class="row">
<div class="col-sm-8 text-left">
<ul class="footer-link-list" data-am-list>
<li class="footer-link-item">
<a href="#" title="" data-am-link="current-color" class="font-bold">COOKIES</a>
</li>
<li class="footer-link-item">
<a href="#" title="" data-am-link="current-color" class="font-bold">IN ENGLISH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Skoda Header
This is a sample Skoda header.
- Note attribute property
compact - Also, you can control text transform with attribute property
lowercase
<div data-am-header-wrapper="bg-white">
<div class="container" data-am-header="compact lowercase bg-white imf">
<div class="top-nav">
<div class="logo-link">
<a href="#">
<img src="/assets/toolkit/images/skoda/logo-next.png" class="logo" data-styleguide-header-logo />
</a>
</div>
<ul class="site-nav" data-am-list="">
<li class="site-nav-item is-active">
<a href="#" title="Personbilar" class="site-nav-link">Personbilar</a>
</li>
<li class="site-nav-item ">
<a href="#" title="VW Transportbilar" class="site-nav-link">Transportbilar</a>
</li>
</ul>
<div class="additional-logo-link">
<a href="#">
<img src="/assets/toolkit/images/skoda/logo-next.png" class="additional-logo" data-styleguide-header-logo-add />
</a>
</div>
</div>
<div data-am-columnrow="imf" class="main-nav-container-wrapper">
<div class="column hidden-lg column-logo">
<div class="logo-container">
<img src="/assets/toolkit/images/skoda/logo-next.png" alt="Skoda Logo" class="logo" data-styleguide-header-logo />
</div>
</div>
<div class="main-nav-container column">
<ul class="main-nav" data-am-list>
<li class="main-nav-item home-link">
<a href="#" title="" class="main-nav-link no-padding">
<img src="/assets/toolkit/images/skoda/logo-next.png" alt="Skoda Logo" class="logo" data-styleguide-header-logo />
</a>
</li>
<li class="main-nav-item">
<a href="#" title="" class="main-nav-link">Bilförsäkringen</a>
</li>
<li class="main-nav-item">
<a href="#" title="" class="main-nav-link">Animäl skada</a>
</li>
<li class="main-nav-item">
<a href="#" title="" class="main-nav-link">Om Škoda Försäkring</a>
</li>
<li class="main-nav-item">
<a href="#" title="" class="main-nav-link">Tips och råd</a>
</li>
<li class="main-nav-item is-active">
<a href="#" title="" class="main-nav-link">Mina sidor</a>
</li>
</ul>
</div>
<div class="column b-l b-r column-extensions">
<a href="" class="user-bar">
<img src="/assets/toolkit/images/skoda/profile-icon.svg" alt="" class="image" />
<p class="text">Imf-Kund 180912</p>
</a>
</div>
<button class="btn-mobile-nav btn-mobile-nav-right" id="btn-open-main-nav">
<i class="icon-menu no-margin"></i>
</button>
</div>
<div class="main-subnav-container">
<div data-am-columnrow>
<div class="column">
<ul class="main-subnav" data-am-list>
<li class="main-subnav-item is-active">
<a href="#" title="" class="main-subnav-link">Översikt</a>
</li>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Försäkringar</a>
</li>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Skador</a>
<ul class="main-subnav" data-am-list>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Test 1</a>
</li>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Test 2</a>
</li>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Test 3</a>
</li>
</ul>
</li>
<li class="main-subnav-item">
<a href="#" title="" class="main-subnav-link">Min profil</a>
</li>
</ul>
</div>
<div class="column">
<ul class="main-subnav float-right" data-am-list>
<li class="main-subnav-item right-column-item">
<a href="#" title="" class="main-subnav-link">Logga Ut</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Insurances Grid
This structure is used to display insurances grid (list variant);
DISPLAY OTHERS
<div data-insurances-grid="no-border limit-records-3" data-am-card="full-width shadow">
<ul>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">ABC 123</div>
<div class="font-regular car-model-text">ŠKODA SUPERB</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="font-bold error-text">PAYMENT ERROR</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text c-error">14 524 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">ABC 123</div>
<div class="font-regular car-model-text">ŠKODA SUPERB</div>
</div>
<div class="item-row">
<span class="font-bold error-text">PAYMENT ERROR</span>
</div>
<div class="item-row">
<span class="font-regular price-text c-error">14 524 kr/år</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA FABIA</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="message-text">Next payment due in 13 days</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">216 kr/mån</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA FABIA</div>
</div>
<div class="item-row">
<span class="message-text">Next payment due in 13 days</span>
</div>
<div class="item-row">
<span class="font-regular price-text">216 kr/mån</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA (SK)BRAVI/MP CAR</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="message-text">Nästa betalning är om 34 dagar.</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">14 524 kr/mån</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA (SK)BRAVI/MP CAR</div>
</div>
<div class="item-row">
<span class="message-text">Nästa betalning är om 34 dagar.</span>
</div>
<div class="item-row">
<span class="font-regular price-text">14 524 kr/mån</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">XYZ 789</div>
<div class="font-regular car-model-text">ŠKODA RAPID Spaceback</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="font-bold error-text">PAYMENT OVERDUE</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text c-error">18 596 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">XYZ 789</div>
<div class="font-regular car-model-text">ŠKODA RAPID Spaceback</div>
</div>
<div class="item-row">
<span class="font-bold error-text">PAYMENT OVERDUE</span>
</div>
<div class="item-row">
<span class="font-regular price-text c-error">18 596 kr/år</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">DHY 111</div>
<div class="font-regular car-model-text">ŠKODA OCTAVIA</div>
</div>
</div>
</div>
<div class="item-cell message-container">
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">10 596 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">DHY 111</div>
<div class="font-regular car-model-text">ŠKODA OCTAVIA</div>
</div>
<div class="item-row">
</div>
<div class="item-row">
<span class="font-regular price-text">10 596 kr/år</span>
</div>
</a>
</li>
</ul>
<div class="additional-content-wrapper">
<div class="display-others additional-content"><span data-am-link="primary-color" data-am-insurances-display-all-link>DISPLAY OTHERS</span></div>
</div>
</div>Insurances Grid All
This structure is used to display insurances grid (list variant);
DISPLAY OTHERS
<div data-insurances-grid="no-border" data-am-card="full-width shadow">
<ul>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">ABC 123</div>
<div class="font-regular car-model-text">ŠKODA SUPERB</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="font-bold error-text">PAYMENT ERROR</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text c-error">14 524 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">ABC 123</div>
<div class="font-regular car-model-text">ŠKODA SUPERB</div>
</div>
<div class="item-row">
<span class="font-bold error-text">PAYMENT ERROR</span>
</div>
<div class="item-row">
<span class="font-regular price-text c-error">14 524 kr/år</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA FABIA</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="message-text">Next payment due in 13 days</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">216 kr/mån</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA FABIA</div>
</div>
<div class="item-row">
<span class="message-text">Next payment due in 13 days</span>
</div>
<div class="item-row">
<span class="font-regular price-text">216 kr/mån</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA (SK)BRAVI/MP CAR</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="message-text">Nästa betalning är om 34 dagar.</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">14 524 kr/mån</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">EFG 456</div>
<div class="font-regular car-model-text">ŠKODA (SK)BRAVI/MP CAR</div>
</div>
<div class="item-row">
<span class="message-text">Nästa betalning är om 34 dagar.</span>
</div>
<div class="item-row">
<span class="font-regular price-text">14 524 kr/mån</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">XYZ 789</div>
<div class="font-regular car-model-text">ŠKODA RAPID Spaceback</div>
</div>
</div>
</div>
<div class="item-cell message-container">
<span class="font-bold error-text">PAYMENT OVERDUE</span>
</div>
<div class="item-cell price-container">
<span class="font-regular price-text c-error">18 596 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">XYZ 789</div>
<div class="font-regular car-model-text">ŠKODA RAPID Spaceback</div>
</div>
<div class="item-row">
<span class="font-bold error-text">PAYMENT OVERDUE</span>
</div>
<div class="item-row">
<span class="font-regular price-text c-error">18 596 kr/år</span>
</div>
</a>
</li>
<li data-insurances-griditem="list">
<!-- Desktop -->
<a class="item-wrapper hidden-lt-md" href="#">
<div class="item-cell info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="font-bold car-number-text">DHY 111</div>
<div class="font-regular car-model-text">ŠKODA OCTAVIA</div>
</div>
</div>
</div>
<div class="item-cell message-container">
</div>
<div class="item-cell price-container">
<span class="font-regular price-text">10 596 kr/år</span>
</div>
<div class="item-cell action-container">
<span title="" data-am-button="primary uppercase compact">Open</span>
</div>
</a>
<!-- Mobile -->
<a class="item-wrapper hidden-md" href="#">
<div class="item-row">
<div class="font-bold car-number-text">DHY 111</div>
<div class="font-regular car-model-text">ŠKODA OCTAVIA</div>
</div>
<div class="item-row">
</div>
<div class="item-row">
<span class="font-regular price-text">10 596 kr/år</span>
</div>
</a>
</li>
</ul>
<div class="additional-content-wrapper">
<div class="display-others additional-content"><span data-am-link="primary-color" data-am-insurances-display-all-link>DISPLAY OTHERS</span></div>
</div>
</div>Modal Sample
Bankid
NOTE: This modal is modified to fit the styleguide. If you are going to use this in production, remove the inline styling from <div data-am-modal></div>.
Öppna BankID säkerhetsapp i din mobila enhet.
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div data-am-modal="small" style="position: relative;">
<div class="modal-container">
<div class="modal-center">
<div class="modal-dialog">
<div class="modal-header">
<div data-am-icontext>
<div class="icon">
<img src="/assets/toolkit/images/bankid_logo.png" alt="Mobilt BankID" class="icon-image" />
</div>
<div class="text">
<h3 class="no-margin">Inloggning med Mobilt BankID</h3>
</div>
</div>
</div>
<div>
<div class="m-t">
<div class="m-b-half">Öppna BankID säkerhetsapp i din mobila enhet.</div>
<div data-am-spinner="inline">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66">
<circle class="spinner-stroke" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div><span class="m-l-half">Väntar på svar från Mobilt BankID</span>
</div>
<div class="m-t">
<button data-am-button="primary full-width" class="">Avbryt</button>
<button data-am-button="primary full-width" disabled class="">Avbryt disabled</button>
</div>
</div>
<button class="btn-close-modal">
<i class="icon-cancel no-margin"></i>
</button>
</div>
</div>
</div>
</div>Current Email
NOTE: This modal is modified to fit the styleguide. If you are going to use this in production, remove the inline styling from <div data-am-modal></div>.
Aktuell E-mail
Det var längesedan du loggade in, vi vill säkerställa att din e-mailadress fortfarande är aktuell
E-mailadress: anders@email.se Ändra
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div data-am-modal="big" style="position: relative;">
<div class="modal-container">
<div class="modal-center">
<div class="modal-dialog">
<div class="modal-header">
<h3>Aktuell E-mail</h3>
<div>Det var längesedan du loggade in, vi vill säkerställa att din e-mailadress fortfarande är aktuell</div>
</div>
<div>
<div class="m-t">
E-mailadress: <span class="text-lighten">anders@email.se</span> <a href="#" title="" data-am-link="underline">Ändra</a>
</div>
<div class="m-t">
<button data-am-button="primary full-width" class="">Fortsätt till mina sidor</button>
<button data-am-button="primary full-width" disabled class="">Fortsätt till mina sidor disabled</button>
</div>
</div>
<button class="btn-close-modal">
<i class="icon-cancel no-margin"></i>
</button>
</div>
</div>
</div>
</div>Digital Letter
NOTE: This modal is modified to fit the styleguide. If you are going to use this in production, remove the inline styling from <div data-am-modal></div>.
Digitala brev
Vi behöver din e-mailadress. Mata in en giltig e-mail och verifiera den för att gå vidare till mina sidor.
E-mailadress: anders@email.se
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div data-am-modal="big" style="position: relative;">
<div class="modal-container">
<div class="modal-center">
<div class="modal-dialog">
<div class="modal-header">
<h3>Digitala brev</h3>
<div>Vi behöver din e-mailadress. Mata in en giltig e-mail och verifiera den för att gå vidare till mina sidor.</div>
</div>
<div>
<div class="bg-accent p-half">
<div data-am-inputselection="checkbox center">
<input type="checkbox" id="modal-sample-email-1" name="modal-sample-email" />
<label for="modal-sample-email-1">
<span class="text">
<span>Digitala bred</span><br />
<span class="text-lighten">Jag vill få mina brev och fakturor digital på mina sidor</span>
</span>
</label>
</div>
</div>
<div class="m-t">
E-mailadress: <span class="text-lighten">anders@email.se</span>
</div>
<div class="m-t">
<button data-am-button="primary full-width" class="">Fortsätt till mina sidor</button>
<button data-am-button="primary full-width" disabled class="">Fortsätt till mina sidor disabled</button>
</div>
</div>
<button class="btn-close-modal">
<i class="icon-cancel no-margin"></i>
</button>
</div>
</div>
</div>
</div>NOTE: This modal is modified to fit the styleguide. If you are going to use this in production, remove the inline styling from <div data-am-modal></div>.
Vi behöver din e-mailadress. Mata in en giltig e-mail och verifiera den för att gå vidare till mina sidor.
E-mailadress
E-mailadress
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div data-am-modal="big" style="position: relative;">
<div class="modal-container">
<div class="modal-center">
<div class="modal-dialog">
<div class="modal-header">
<h3>Email</h3>
<div>Vi behöver din e-mailadress. Mata in en giltig e-mail och verifiera den för att gå vidare till mina sidor.</div>
</div>
<div>
<div class="m-b">
<div class="m-b-half">
<div class="text-lighten m-b-mini">E-mailadress</div>
<div data-am-inputtext>
<input type="text" placeholder=" " id="" />
</div>
</div>
<div class="m-b-half">
<div class="text-lighten m-b-mini">E-mailadress</div>
<div data-am-inputtext>
<input type="text" placeholder=" " id="" />
</div>
</div>
</div>
<div class="bg-accent p-half">
<div data-am-inputselection="checkbox center">
<input type="checkbox" id="modal-sample-email-1" name="modal-sample-email" />
<label for="modal-sample-email-1">
<span class="text">
<span>Digitala bred</span><br />
<span class="text-lighten">Jag vill få mina brev och fakturor digital på mina sidor</span>
</span>
</label>
</div>
</div>
<div class="m-t">
<button data-am-button="primary full-width" class="">Fortsätt till mina sidor</button>
<button data-am-button="primary full-width" disabled class="">Fortsätt till mina sidor disabled</button>
</div>
</div>
<button class="btn-close-modal">
<i class="icon-cancel no-margin"></i>
</button>
</div>
</div>
</div>
</div>Message Create
NOTE: This modal is modified to fit the styleguide. If you are going to use this in production, remove the inline styling from <div data-am-modal></div>.
Kontakta oss
Skriv din fråga eller meddelande till oss nedan
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
Jag vill bli kontaktad på följande sätt:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->
<div data-am-modal="big" style="position: relative;">
<div class="modal-container">
<div class="modal-center">
<div class="modal-dialog">
<div class="modal-header">
<h3 class="no-margin">Kontakta oss</h3>
</div>
<div class="m-b">
<div data-am-columnrow="always" class="m-b-mini">
<div class="column">
Skriv din fråga eller meddelande till oss nedan
</div>
<div class="column">
<div data-am-tooltip class="">
<div class="tooltip-btn">
<span class="btn-icon">?</span>
</div>
<div class="tooltip">
<div class="tooltip-content">
<div data-am-content="text-smaller">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.</p>
</div>
</div>
<div class="tooltip-close-btn">
<i class="icon-cancel no-margin"></i>
</div>
</div>
<div class="ui-block"></div>
</div>
</div>
</div>
<div data-am-inputtext>
<textarea placeholder=" " id=""></textarea>
</div>
</div>
<div class="m-b">
<div data-am-columnrow="always" class="m-b-half">
<div class="column">
Jag vill bli kontaktad på följande sätt:
</div>
<div class="column">
<div data-am-tooltip class="">
<div class="tooltip-btn">
<span class="btn-icon">?</span>
</div>
<div class="tooltip">
<div class="tooltip-content">
<div data-am-content="text-smaller">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.</p>
</div>
</div>
<div class="tooltip-close-btn">
<i class="icon-cancel no-margin"></i>
</div>
</div>
<div class="ui-block"></div>
</div>
</div>
</div>
<div class="m-b-mini">
<div data-am-inputselection="radio" class="">
<input type="radio" id="message-modal-radio-1" name="message-modal" />
<label for="message-modal-radio-1"><span class="text">Via hemmakontoret</span></label>
</div>
</div>
<div class="m-b-half">
<div data-am-inputselection="radio" class="">
<input type="radio" id="message-modal-radio-2" name="message-modal" />
<label for="message-modal-radio-2"><span class="text">Via nedanstående melj</span></label>
</div>
</div>
<div data-am-inputtext>
<input type="text" placeholder="E-postadress" id="" />
</div>
</div>
<button data-am-button="primary full-width" class="">Skicka</button>
<button data-am-button="primary full-width" disabled class="">Skicka disabled</button>
<button class="btn-close-modal">
<i class="icon-cancel no-margin"></i>
</button>
</div>
</div>
</div>
</div>Payments
Payments Table With Car
This structure is used to show payments table for particular insurance.
ABC 123
Škoda Superb
You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.
-
Payment amount110.00 krDue date2018-06-20Due in 12 days
-
Payment amount110.00 krDue date2018-01-20Paid
-
Payment amount110.00 krDue date2017-06-20Paid
-
Payment amount110.00 krDue date2017-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2016-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2015-01-20Refund {refund reason}
Load older payments
<div data-am-insurance-payments-block>
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.</div>
<div class="payments-header">
<div class="col-sm-2h no-padding-sm price-wrapper">
<div>Next payment</div>
<div class="font-bold h3 no-margin">239.21 kr</div>
</div>
<div class="col-sm-2h no-padding-sm duedate-wrapper">
<div>Due date</div>
<div class="font-bold due-date h3-height">2018-08-20</div>
</div>
<div class="col-sm-4 download-link-wrapper no-padding-sm">
<a href="#" data-am-link="primary-color no-decoration" class="vertical-center"><span class="icon icon-download"></span> Download</a>
</div>
<div class="col-sm-3 details-link-wrapper">
<div data-am-link="primary-color no-decoration" data-am-payments-details-link class="details-link vertical-center">
<span class="details-show-link">See all payments</span>
<span class="details-hide-link">Hide payments</span>
</div>
</div>
</div>
<div class="payments-container">
<ul>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-scheduled"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Due in 12 days</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2016-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2015-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
</ul>
<div class="bottom-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-payments-display-all-link>Load older payments</span>
</div>
</div>
</div>
</div>Payments Table With Car Limited
This structure is used to show payments table for particular insurance.
ABC 123
Škoda Superb
You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.
-
Payment amount110.00 krDue date2018-06-20Due in 12 days
-
Payment amount110.00 krDue date2018-01-20Paid
-
Payment amount110.00 krDue date2017-06-20Paid
-
Payment amount110.00 krDue date2017-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2016-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2015-01-20Refund {refund reason}
Load older payments
<div data-am-insurance-payments-block="limit-records-3">
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.</div>
<div class="payments-header">
<div class="col-sm-2h no-padding-sm price-wrapper">
<div>Next payment</div>
<div class="font-bold h3 no-margin">239.21 kr</div>
</div>
<div class="col-sm-2h no-padding-sm duedate-wrapper">
<div>Due date</div>
<div class="font-bold due-date h3-height">2018-08-20</div>
</div>
<div class="col-sm-4 download-link-wrapper no-padding-sm">
<a href="#" data-am-link="primary-color no-decoration" class="vertical-center"><span class="icon icon-download"></span> Download</a>
</div>
<div class="col-sm-3 details-link-wrapper">
<div data-am-link="primary-color no-decoration" data-am-payments-details-link class="details-link vertical-center">
<span class="details-show-link">See all payments</span>
<span class="details-hide-link">Hide payments</span>
</div>
</div>
</div>
<div class="payments-container">
<ul>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-scheduled"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Due in 12 days</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2016-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2015-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
</ul>
<div class="bottom-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-payments-display-all-link>Load older payments</span>
</div>
</div>
</div>
</div>Payments Table With Car Error Limited
This structure is used to show payments table for particular insurance.
ABC 123
Škoda Superb
You have chosen <PaymentMethod>(e.g. Invoice) payments. Please make the payment before due date. Note, it can take few days to receive your payment and display it here.
-
Payment amount110.00 krDue date2018-06-20Overdue
-
Payment amount110.00 krDue date2018-01-20Paid
-
Payment amount110.00 krDue date2017-06-20Paid
-
Payment amount110.00 krDue date2017-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2016-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2015-01-20Refund {refund reason}
Load older payments
<div data-am-insurance-payments-block="limit-records-3" class="is-overdue">
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. Invoice) payments. Please make the payment before due date. Note, it can take few days to receive your payment and display it here.</div>
<div class="payments-header">
<div class="col-sm-2h no-padding-sm price-wrapper">
<div>Next payment</div>
<div class="font-bold h3 no-margin">239.21 kr</div>
</div>
<div class="col-sm-2h no-padding-sm duedate-wrapper">
<div>Due date</div>
<div class="font-bold due-date h3-height">2018-08-20</div>
</div>
<div class="col-sm-4 download-link-wrapper no-padding-sm">
<a href="#" data-am-link="primary-color no-decoration" class="vertical-center"><span class="icon icon-download"></span> Download</a>
</div>
<div class="col-sm-3 details-link-wrapper">
<div data-am-link="primary-color no-decoration" data-am-payments-details-link class="details-link vertical-center">
<span class="details-show-link">See all payments</span>
<span class="details-hide-link">Hide payments</span>
</div>
</div>
</div>
<div class="payments-error">
<div class="col-sm-10 message-error">Your payment day is passed, but we have not received the amount. Please pay as quickly as possible to avoid late payment penalty. Note, it can take a few days to receive your payment, if you did pay last few days ignore the message.</div>
</div>
<div class="payments-container">
<ul>
<li data-am-insurance-payments-item class="is-overdue">
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-overdue"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Overdue</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2016-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2015-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
</ul>
<div class="bottom-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-payments-display-all-link>Load older payments</span>
</div>
</div>
</div>
</div>Payments No Table With Car
This structure is used to show payments table for particular insurance.
ABC 123
Škoda Superb
You have chosen <PaymentMethod>(e.g. SAABCort Monthly) payments, please contact <PartnerName> for payment dates, statuses and details.
<div data-am-insurance-payments-block="limit-records-3">
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. SAABCort Monthly) payments, please contact <PartnerName> for payment dates, statuses and details.</div>
</div>Payments Table Limited
This structure is used to show payments table for particular insurance.
You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.
-
Payment amount110.00 krDue date2018-06-20Due in 12 days
-
Payment amount110.00 krDue date2018-01-20Paid
-
Payment amount110.00 krDue date2017-06-20Paid
-
Payment amount110.00 krDue date2017-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2016-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2015-01-20Refund {refund reason}
Load older payments
<div data-am-insurance-payments-block="limit-records-3">
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. e-invoice/direct debit) payments. The amount is automatically deducted on the specified date of withdrawal from the specified account number.</div>
<div class="payments-header">
<div class="col-sm-2h no-padding-sm price-wrapper">
<div>Next payment</div>
<div class="font-bold h3 no-margin">239.21 kr</div>
</div>
<div class="col-sm-2h no-padding-sm duedate-wrapper">
<div>Due date</div>
<div class="font-bold due-date h3-height">2018-08-20</div>
</div>
<div class="col-sm-4 download-link-wrapper no-padding-sm">
<a href="#" data-am-link="primary-color no-decoration" class="vertical-center"><span class="icon icon-download"></span> Download</a>
</div>
<div class="col-sm-3 details-link-wrapper">
<div data-am-link="primary-color no-decoration" data-am-payments-details-link class="details-link vertical-center">
<span class="details-show-link">See all payments</span>
<span class="details-hide-link">Hide payments</span>
</div>
</div>
</div>
<div class="payments-container">
<ul>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-scheduled"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Due in 12 days</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2016-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2015-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
</ul>
<div class="bottom-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-payments-display-all-link>Load older payments</span>
</div>
</div>
</div>
</div>Payments Table With Car Paid
This structure is used to show payments table for particular insurance.
ABC 123
Škoda Superb
You have chosen <PaymentMethod>(e.g. Invoice) payments. Please make the payment before due date. Note, it can take few days to receive your payment and display it here.
All payments have been paid for this policy. Happy driving!
See all payments
-
Payment amount110.00 krDue date2018-06-20Due in 12 days
-
Payment amount110.00 krDue date2018-01-20Paid
-
Payment amount110.00 krDue date2017-06-20Paid
-
Payment amount110.00 krDue date2017-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2016-01-20Refund {refund reason}
-
Payment amount110.00 krDue date2015-01-20Refund {refund reason}
Load older payments
<div data-am-insurance-payments-block>
<div class="car-row">
<div class="info-container">
<div class="item-image-container m-r-alt">
<div data-am-icon="shape-circle bg-border">
<img src="/assets/toolkit/images/skoda/car-skoda-icon.svg" alt="" class="image">
</div>
</div>
<div class="item-info-container">
<div class="item-info-wrapper">
<div class="h3 no-margin vehicle-reg-nr">ABC 123</div>
<div class="h6 no-margin text-uppercase car-model-text">Škoda Superb</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 no-padding m-y-half payment-description">You have chosen <PaymentMethod>(e.g. Invoice) payments. Please make the payment before due date. Note, it can take few days to receive your payment and display it here.</div>
<div class="payments-header">
<div class="col-sm-9 no-padding-sm paid">
<div class="vertical-center td">All payments have been paid for this policy. Happy driving!</div>
</div>
<div class="col-sm-3 details-link-wrapper">
<div data-am-link="primary-color no-decoration" data-am-payments-details-link class="details-link vertical-center">
<span class="details-show-link">See all payments</span>
<span class="details-hide-link">Hide payments</span>
</div>
</div>
</div>
<div class="payments-container">
<ul>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-scheduled"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Due in 12 days</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2018-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-success"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-06-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Paid</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2017-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2016-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
<li data-am-insurance-payments-item>
<div class="item-wrapper">
<div class="col-sm-2h no-padding-sm amount-wrapper">
<div class="hidden-sm amount-label">Payment amount</div>
<div>
<span class="icon icon-refunded"></span>
110.00 kr
</div>
</div>
<div class="col-sm-2h no-padding-sm right-align deudate-wrapper">
<div class="hidden-sm date-label">Due date</div>
<div>2015-01-20</div>
</div>
<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
<div>Refund {refund reason}</div>
</div>
</div>
</li>
</ul>
<div class="bottom-row">
<div class="col-12 display-others">
<span data-am-link="primary-color" data-am-payments-display-all-link>Load older payments</span>
</div>
</div>
</div>
</div>