Välkommen till mina sidor

Volvia Halvförsäkring

V90 D4 – DEF 456

Månadskostnad 310 kr

<!--
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>

Item Card

This is a card displaying an item.

Ny händelse

Volvia Halvförsäkring

V90 D4 – DEF 456

Månadskostnad 310 kr

<!--
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>

Link Accordion

This is an accordion that contains columns for links.

<div data-am-linkaccordion>
	<ul class="accordion-list" data-am-list>
		<li class="accordion-item">
			<input type="checkbox" name="link-accordion" class="checkbox" id="link-accordion-item-1" />
			<label for="link-accordion-item-1" class="accordion-header">
				Mest lästa
			</label>
			<div class="accordion-body">
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Barn i bilen</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Helförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Bila utomlands</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Vad ska jag välja?</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Om vagnskadegaranti</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Assistansförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">När det hänt en skada</a>
			</div>
		</li>
		<li class="accordion-item">
			<input type="checkbox" name="link-accordion" class="checkbox" id="link-accordion-item-2" />
			<label for="link-accordion-item-2" class="accordion-header">
				Bilförsäkring
			</label>
			<div class="accordion-body">
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Trafikförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Halvförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Helförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Hyrbilsförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Nice Price Försäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Tilläggsförsäkringar</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Självrisker och villkor</a>
			</div>
		</li>
		<li class="accordion-item">
			<input type="checkbox" name="link-accordion" class="checkbox" id="link-accordion-item-3" />
			<label for="link-accordion-item-3" class="accordion-header">
				Anmäl skada
			</label>
			<div class="accordion-body">
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Brand</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Bärgning</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Kollision</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Kollision med djur</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Maskinskada</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Singelolycka/skadegörelse</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Stenskott/glasskada</a>
			</div>
		</li>
		<li class="accordion-item">
			<input type="checkbox" name="link-accordion" class="checkbox" id="link-accordion-item-4" />
			<label for="link-accordion-item-4" class="accordion-header">
				Tips & Råd
			</label>
			<div class="accordion-body">
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Barn i bilen</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Bila utomlands</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Grönt Kort för bilen</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Helförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Hyrbilsförsäkring</a>
				<a href="#" title="" data-am-link="underline" class="l-block m-b-half">Parkeringsskada</a>
			</div>
		</li>
	</ul>
</div>

Link List

Link List Document Single Dark

This is a link list listing a single document.

2016-11-28|Månadsfaktura

Ladda ner

<div data-am-linklist="document dark">
	<ul class="list">
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<div class="document-icon-container">
					<img src="/assets/toolkit/images/pdf_icon.png" alt="" class="document-icon" />
				</div>
				<div data-am-columnrow>
					<div class="column">
						2016-11-28<span class="m-x-half">|</span>Månadsfaktura
					</div>
					<div class="column hidden-lt-md">
						<span class="text-secondary">Ladda ner</span>
					</div>
				</div>
			</a>
		</li>
	</ul>
</div>

Link List Document Single

This is a link list listing a single document.

2016-11-28|Månadsfaktura

<div data-am-linklist="document">
	<ul class="list">
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<div class="document-icon-container">
					<img src="/assets/toolkit/images/pdf_icon.png" alt="" class="document-icon" />
				</div>
				2016-11-28<span class="m-x-half">|</span>Månadsfaktura
			</a>
		</li>
	</ul>
</div>

Link List Document

This is a link list listing documents.

<div data-am-linklist="document">
	<ul class="list">
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<div class="document-icon-container">
					<img src="/assets/toolkit/images/pdf_icon.png" alt="" class="document-icon" />
				</div>
				General Conitions Of Insurance (in English)
			</a>
		</li>
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<div class="document-icon-container">
					<img src="/assets/toolkit/images/pdf_icon.png" alt="" class="document-icon" />
				</div>
				Fullständiga villkor
			</a>
		</li>
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<div class="document-icon-container">
					<img src="/assets/toolkit/images/pdf_icon.png" alt="" class="document-icon" />
				</div>
				Rättsskydd
			</a>
		</li>
	</ul>
</div>

Link List

This is a link list listing messages.

<div data-am-linklist>
	<ul class="list">
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<i class="icon-dot m-r-half text-secondary"></i>Re: Från halv till helförsäkring?
			</a>
		</li>
		<li class="list-item">
			<a href="#" title="" class="item-link">
				<i class="icon-dot m-r-half text-secondary"></i>Din vagnskadegaranti håller på att gå ut
			</a>
		</li>
		<li class="list-item">
			<a href="#" title="" class="item-link">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit
			</a>
		</li>
	</ul>
</div>

Links

Default

Default link style. Uses brands secondary color.

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Default link - active
Default link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link>Default link - active</a>
	<br />
	<a href="#" title="" data-am-link class="is-disabled">Default link - disabled</a>
</div>

Primary Color

Link with it's text color set to brands primary.

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Primary color link - active
Primary color link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="primary-color">Primary color link - active</a>
	<br />
	<a href="#" title="" data-am-link="primary-color" class="is-disabled">Primary color link - disabled</a>
</div>

Current Color

Link with it's text color set to brands text.

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Current color link - active
Current color link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="current-color">Current color link - active</a>
	<br />
	<a href="#" title="" data-am-link="current-color" class="is-disabled">Current color link - disabled</a>
</div>

Lighten Color

Link with it's text color set to lightened brand text.

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Lighten color link - active
Lighten color link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="lighten-color">Lighten color link - active</a>
	<br />
	<a href="#" title="" data-am-link="lighten-color" class="is-disabled">Lighten color link - disabled</a>
</div>

Secondary Color

Link with it's text color set to brands primary.

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Primary color link - active
Primary color link - disabled

<div>
	<a href="#" title="" data-am-link="secondary-color">Primary color link - active</a>
	<br />
	<a href="#" title="" data-am-link="secondary-color" class="is-disabled">Primary color link - disabled</a>
</div>

Big

Increased size link

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Big link - active
Big link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="big">Big link - active</a>
	<br />
	<a href="#" title="" data-am-link="big" class="is-disabled">Big link - disabled</a>
</div>

Small

Decreased size link

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Small link - active
Small link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="small">Small link - active</a>
	<br />
	<a href="#" title="" data-am-link="small" class="is-disabled">Small link - disabled</a>
</div>

Underline

Underlined link

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Underlined link - active
Underlined link - disabled
Underlined primary color link - active
Underlined primary color link - disabled
Underlined current color link - active
Underlined current color link - disabled
Underlined lightened color link - active
Underlined lightened color link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="underline">Underlined link - active</a>
	<br />
	<a href="#" title="" data-am-link="underline" class="is-disabled">Underlined link - disabled</a>
	<br />
	<a href="#" title="" data-am-link="underline primary-color">Underlined primary color link - active</a>
	<br />
	<a href="#" title="" data-am-link="underline primary-color" class="is-disabled">Underlined primary color link - disabled</a>
	<br />
	<a href="#" title="" data-am-link="underline current-color">Underlined current color link - active</a>
	<br />
	<a href="#" title="" data-am-link="underline current-color" class="is-disabled">Underlined current color link - disabled</a>
	<br />
	<a href="#" title="" data-am-link="underline lighten-color">Underlined lightened color link - active</a>
	<br />
	<a href="#" title="" data-am-link="underline lighten-color" class="is-disabled">Underlined lightened color link - disabled</a>
</div>

Uppercase

Uppercased link

NOTE: This links is modified to fit the styleguide. If you are going to use this in production, remove wrapping <div></div> and <br/> tags.

Underlined link - active
Underlined link - disabled

<div style="background-color: #b5b5b5; padding: 5px 10px;">
	<a href="#" title="" data-am-link="uppercase">Underlined link - active</a>
	<br />
	<a href="#" title="" data-am-link="uppercase" class="is-disabled">Underlined link - disabled</a>
	<br />
</div>

Main Navigation

This is the mobile navigation for this site.

Open navigation menu by adding is-open class to nav element.
Also, you can control text transform with attribute property lowercase

This component can only be shown on a page.

This component can only be shown on a page.

<nav data-am-mainnavigation>
	<div class="main-navigation">
		<div class="main-nav-header">
			<div class="header-logo">
				<img src="/assets/toolkit/images/logo_volvia_black.png" alt="Volvia Logo" class="logo" />
			</div>
			<div class="header-close">
				<button class="close-btn" id="btn-close-main-nav"><i class="icon-cancel no-margin"></i></button>
			</div>
		</div>
		<div class="main-nav-body">
			<ul class="main-nav" data-am-list>
				<li class="main-nav-item is-active">
					<a href="#" title="" class="main-nav-link">Översikt</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Fakturor</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Försäkringar</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Skador</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Frågor & svar</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Blanketter & villkor</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Kontakta oss</a>
				</li>
			</ul>
		</div>
		<div class="main-nav-footer">
			<div class="main-nav-label">Min profil</div>
			<ul class="main-nav" data-am-list>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Mina uppgifter</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link"><i class="icon-signout m-r-mini"></i>Logga ut</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="ui-block"></div>
</nav>

Main Navigation Full Width

This is the mobile navigation for this site.

Note attribute property full-width
Open navigation menu by adding is-open class to nav element.
Also, you can control text transform with attribute property lowercase

This component can only be shown on a page.

This component can only be shown on a page.

<nav data-am-mainnavigation="full-width lowercase">
	<div class="main-navigation">
		<div class="main-nav-header">
			<div class="header-logo">
				<img src="/assets/toolkit/images/skoda/logo-next.png" alt="Skoda Logo" class="logo" />
			</div>
			<div class="header-close">
				<button class="close-btn" id="btn-close-main-nav"><i class="icon-cancel no-margin"></i></button>
			</div>
		</div>
		<div class="main-nav-body">
			<ul class="main-nav" data-am-list>
				<li class="main-nav-item is-active">
					<a href="#" title="" class="main-nav-link">Översikt</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Fakturor</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Försäkringar</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Skador</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Frågor & svar</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Blanketter & villkor</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Kontakta oss</a>
				</li>
			</ul>
		</div>
		<div class="main-nav-footer">
			<div class="main-nav-label">Min profil</div>
			<ul class="main-nav" data-am-list>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link">Mina uppgifter</a>
				</li>
				<li class="main-nav-item">
					<a href="#" title="" class="main-nav-link"><i class="icon-signout m-r-mini"></i>Logga ut</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="ui-block"></div>
</nav>

Main Navigation Imf

This is the mobile navigation for IMF.

Note attribute property full-width
Open navigation menu by adding is-open class to nav element.
Also, you can control text transform with attribute property lowercase

This component can only be shown on a page.

This component can only be shown on a page.


<nav data-am-mainnavigation="full-width lowercase header-white imf">
	<div class="main-navigation">
		<div data-am-columnrow="imf" class="main-nav-header">
			<div class="header-extensions-wrapper">
				<div class="column header-logo">
					<a href="#">
						<img src="/assets/toolkit/images/skoda/logo-next.png" class="logo" data-styleguide-navigation-logo />
					</a>
				</div>
				<div class="column header-additional-logo">
					<a href="#">
						<img src="/assets/toolkit/images/skoda/logo-next.png" class="additional-logo" data-styleguide-navigation-logo-add />
					</a>
				</div>
				<div class="column b-l b-r header-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>
			</div>
			<div class="column header-close">
				<button class="close-btn" id="btn-close-main-nav"><i class="icon-cancel no-margin"></i></button>
			</div>
		</div>
		<div class="main-nav-body">
			<ul class="main-nav" data-am-list>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column">Bilförsäkringen</a>
						<button class="nav-button nav-button-expand column b-l"><i class="icon-expand no-margin"></i></button>
					</div>
					<ul class="sub-nav" data-am-list>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub1</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub2</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub3</a></li>
					</ul>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column">Anmäl skada</a>
						<button class="nav-button nav-button-expand column b-l"><i class="icon-expand no-margin"></i></button>
					</div>
					<ul class="sub-nav" data-am-list>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub1</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub2</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub3</a></li>
					</ul>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column">Om Škoda Försäkring</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column">Tips och råd</a>
						<button class="nav-button nav-button-expand column b-l"><i class="icon-expand no-margin"></i></button>
					</div>
					<ul class="sub-nav" data-am-list>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub1</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub2</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Sub3</a></li>
					</ul>
				</li>
				<li class="main-nav-item nav-item-row is-open  is-active">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column">Mina sidor</a>
						<button class="nav-button nav-button-expand column b-l"><i class="icon-expand no-margin"></i></button>
					</div>
					<ul class="sub-nav" data-am-list>
						<li class="sub-nav-item nav-item-row is-active" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Oversikt</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Forsakringar</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Betalningsinfo</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Skador</a></li>
						<li class="sub-nav-item nav-item-row" data-am-columnrow="imf sub-nav-item"><a href="#" title="" class="sub-nav-link nav-item-link column">Min profil</a></li>
					</ul>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="imf main-nav-item">
						<a href="#" title="" class="main-nav-link nav-item-link column"><i class="icon-signout m-r-mini"></i>Logga ut</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="ui-block"></div>
</nav>

Main Navigation Vrf

This is the mobile navigation for VRF.

Open navigation menu by adding is-open class to nav element.

This component can only be shown on a page.

This component can only be shown on a page.


<nav data-am-mainnavigation="vrf">
	<div class="main-navigation">
		<div data-am-columnrow="vrf" class="main-nav-header">
			<div class="header-extensions-wrapper">
				<div class="column header-logo">
					<a href="#">
						<img src="/assets/toolkit/images/logo_volvia_black.png" class="logo" data-styleguide-navigation-logo>
					</a>
				</div>
				<div class="column   header-extensions"></div>
			</div>
			<div class="column header-close  ">
				<button class="close-btn" id="btn-close-main-nav" tabindex="0"><i class="icon-cancel no-margin"></i></button>
			</div>
		</div>
		<div class="main-nav-body">
			<ul class="main-nav" data-am-list="">
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="BILFÖRSÄKRING" class="main-nav-link nav-item-link column  ">BILFÖRSÄKRING</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="VID SKADA" class="main-nav-link nav-item-link column  ">VID SKADA</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="BARN I BIL" class="main-nav-link nav-item-link column  ">BARN I BIL</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="TIPS OCH RÅD" class="main-nav-link nav-item-link column  ">TIPS OCH RÅD</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="KUNDSERVICE" class="main-nav-link nav-item-link column  ">KUNDSERVICE</a>
					</div>
				</li>
				<li class="main-nav-item nav-item-row is-active is-open has-children">
					<div data-am-columnrow="vrf main-nav-item">
						<a href="#" title="MINA SIDOR" class="main-nav-link nav-item-link column has-children ">MINA SIDOR</a>
						<button class="nav-button nav-button-expand column " tabindex="0"><i class="icon-expand no-margin"></i></button>
					</div>
					<ul class="sub-nav" data-am-list="">
						<li class="sub-nav-item nav-item-row is-active" data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Översikt" class="sub-nav-link nav-item-link column ">Översikt</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Fakturor" class="sub-nav-link nav-item-link column ">Fakturor</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Försäkringar" class="sub-nav-link nav-item-link column ">Försäkringar</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Skador" class="sub-nav-link nav-item-link column ">Skador</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Frågor &amp; svar" class="sub-nav-link nav-item-link column ">Frågor &amp; svar</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Dokument" class="sub-nav-link nav-item-link column ">Dokument</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Kontakta Oss" class="sub-nav-link nav-item-link column ">Kontakta Oss</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Min profil" class="sub-nav-link nav-item-link column ">Min profil</a>
						</li>
						<li class="sub-nav-item nav-item-row " data-am-columnrow="vrf sub-nav-item">
							<a href="#" title="Logga ut" class="sub-nav-link nav-item-link column logout-link">Logga ut</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="ui-block"></div>
</nav>

Modal

Modal Small

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>.

<!--
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">
					<h3>This is a modal</h3>
				</div>
				<div>This could be anything</div>
				<button class="btn-close-modal">
					<i class="icon-cancel no-margin"></i>
				</button>
			</div>
		</div>
	</div>
</div>

Modal

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>.

<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->

<div data-am-modal style="position: relative;">
	<div class="modal-container">
		<div class="modal-center">
			<div class="modal-dialog">
				<div class="modal-header">
					<h3>This is a modal</h3>
				</div>
				<div>This could be anything</div>
				<button class="btn-close-modal">
					<i class="icon-cancel no-margin"></i>
				</button>
			</div>
		</div>
	</div>
</div>

Modal Big

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>.

<!--
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>This is a modal</h3>
				</div>
				<div>This could be anything</div>
				<button class="btn-close-modal">
					<i class="icon-cancel no-margin"></i>
				</button>
			</div>
		</div>
	</div>
</div>

Notification

Inline Big

This is a notification displaying anything, such as a number.

<span data-am-notification="inline-big" data-count="4"></span>

Inline

This is a notification displaying anything, such as a number.

<span data-am-notification="inline" data-count="4"></span>

Notification

This is a notification displaying anything, such as a number.

<span data-am-notification data-count="4"></span>

Payments Block

Car Row

Used as partial for payments history blocks.

ABC 123

Škoda Superb

<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>

History Row

Used as partial for payments history blocks.

Payment amount

110.00 kr

Due date

2018-08-20

Due in 12 days

Load older payments

<div data-am-insurance-payments-block class="is-open">
	<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>




							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-08-20</div>
					</div>
					<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
						<div>Due in 12 days</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>

History Row Error

Used as partial for payments history blocks.

Payment amount

110.00 kr

Due date

2018-08-20

Overdue

Load older payments

<div data-am-insurance-payments-block class="is-open">
	<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-08-20</div>
					</div>
					<div class="col-sm-7 no-padding-sm right-align comment-wrapper">
						<div>Overdue</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 Header

This structure is used to show claims history table for particular insurance @ Claims page.

Next payment

239.21 kr

Due date

2018-08-20

Download

See all payments Hide payments

<div data-am-insurance-payments-block>

	<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>

Payments Table Header Error

This structure is used to show claims history table for particular insurance @ Claims page.

Next payment

239.21 kr

Due date

2018-08-20

Download

See all payments Hide payments

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 data-am-insurance-payments-block class="is-overdue">

	<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>

Payments Table Header Paid

This structure is used to show claims history table for particular insurance @ Claims page.

All payments have been paid for this policy. Happy driving!

See all payments Hide payments

<div data-am-insurance-payments-block>

	<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>

Payments Table

This structure is used to show claims history table for particular insurance @ Claims page.

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.

Next payment

239.21 kr

Due date

2018-08-20

Download

See all payments Hide payments

Payment amount

110.00 kr

Due date

2018-06-20

Due in 12 days
Payment amount

110.00 kr

Due date

2018-01-20

Paid
Payment amount

110.00 kr

Due date

2017-06-20

Paid
Payment amount

110.00 kr

Due date

2017-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2016-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2015-01-20

Refund {refund reason}

Load older payments

<div data-am-insurance-payments-block>
	<div class="col-md-9 no-padding m-y-half payment-description">You have chosen &lt;PaymentMethod&gt;(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 Error

This structure is used to show claims history table for particular insurance @ Claims page.

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.

Next payment

239.21 kr

Due date

2018-08-20

Download

See all payments Hide payments

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.

Payment amount

110.00 kr

Due date

2018-06-20

Overdue
Payment amount

110.00 kr

Due date

2018-01-20

Paid
Payment amount

110.00 kr

Due date

2017-06-20

Paid
Payment amount

110.00 kr

Due date

2017-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2016-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2015-01-20

Refund {refund reason}

Load older payments

<div data-am-insurance-payments-block class="is-overdue">
	<div class="col-md-9 no-padding m-y-half payment-description">You have chosen &lt;PaymentMethod&gt;(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

This structure is used to show claims history table for particular insurance @ Claims page.

You have chosen <PaymentMethod>(e.g. SAABCort Monthly) payments, please contact <PartnerName> for payment dates, statuses and details.

<div data-am-insurance-payments-block>
	<div class="col-md-9 no-padding m-y-half payment-description">You have chosen &lt;PaymentMethod&gt;(e.g. SAABCort Monthly) payments, please contact &lt;PartnerName&gt; for payment dates, statuses and details.</div>
</div>

Payments Paid Table

This structure is used to show claims history table for particular insurance @ Claims page.

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 Hide payments

Payment amount

110.00 kr

Due date

2018-06-20

Due in 12 days
Payment amount

110.00 kr

Due date

2018-01-20

Paid
Payment amount

110.00 kr

Due date

2017-06-20

Paid
Payment amount

110.00 kr

Due date

2017-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2016-01-20

Refund {refund reason}
Payment amount

110.00 kr

Due date

2015-01-20

Refund {refund reason}

Load older payments

<div data-am-insurance-payments-block>
	<div class="col-md-9 no-padding m-y-half payment-description">You have chosen &lt;PaymentMethod&gt;(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>

Promo

This is a promo that displays an image next to content.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.

Läs mer

<div data-am-promo>
	<div class="image-container">
		<img src="http://placehold.it/185x200" alt="" class="image" />
	</div>
	<div class="content-container">
		<div class="content">
			<h3>Lorem ipsum</h3>
			<div class="text-lighten">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
			<div class="m-t-half">
				<a href="#" title="" data-am-link="big underline">Läs mer</a>
			</div>
		</div>
	</div>
</div>

Promo Half

This is a promo that displays an image next to content (50/50).

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.

Läs mer

<div data-am-promo="half">
	<div class="image-container">
		<img src="http://placehold.it/600x300" alt="" class="image" />
	</div>
	<div class="content-container">
		<div class="content">
			<h3>Lorem ipsum</h3>
			<div class="text-lighten">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</div>
			<div class="m-t-half">
				<a href="#" title="" data-am-link="big underline">Läs mer</a>
			</div>
		</div>
	</div>
</div>

Promo Car

This is a promo that displays an image next to content. This specific promo is used to display a car.

Volvia Halvförsäkring

V90 D4 – DEF 456

Månadskostnad 310 kr

<div data-am-promo>
	<div class="image-container">
		<img src="/assets/toolkit/images/item_placeholder.png" alt="" class="image" />
	</div>
	<div class="content-container">
		<div class="content">
			<div>Volvia Halvförsäkring</div>
			<div class="text-bigger">V90 D4 – DEF 456</div>
			<div>Månadskostnad 310 kr</div>
		</div>
	</div>
</div>

Promo Car Wide Image

This is a promo that displays an wide image next to content. This specific promo is used to display a car.

Volvia Betala per mil

DEF 456 – Volvo V90 D4

<div data-am-promo="wide-image">
	<div class="image-container">
		<img src="/assets/toolkit/images/item_placeholder.png" alt="" class="image" />
	</div>
	<div class="content-container">
		<div class="content">
			<div class="h3">Volvia Betala per mil</div>
			<h1 class="h2 font-bold">DEF 456 – Volvo V90 D4 </h1>
			<button data-am-link><i class="icon-pencil m-r-mini"></i>Ändra försäkring</button>
		</div>
	</div>
</div>

Promo Card

This is a promo that displays an image next to content.

Läs mer

<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>

Promo Card Block Image

This is a promo that displays an image next to content.

Läs mer

<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>

Promo Ad Block

This is a promo that displays 2 ad block each present a image next to a contentan. specific promo is used to displaying on IMF.

<div data-am-promo-container="swipeable" data-am-swipe-indicator data-swipe-container="[data-am-promo-container]" data-swipe-event="swipe" data-swipe-autoload="true">
	<div class="row">
		<div class="col-sm-6 data-am-promo-wrapper">
			<div data-am-promo="ad-block">
				<div class="image-container ">
					<img src="/assets/toolkit/images/skoda/logo.png" alt="" class="image" />
				</div>
				<div class="content-container">
					<div class="content">
						<p>
							Du vet val att du far bra rabatter pa var hemforsakring pa If? Las mer pa <a href="">hemforsakring.if.se</a>. Added some more text to make this a bit longer, just to ensure how this will look with bigger text
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 data-am-promo-wrapper">
			<div data-am-promo="ad-block">
				<div class="image-container">
					<img src="/assets/toolkit/images/skoda/tire.png" alt="" class="image" />
				</div>
				<div class="content-container">
					<div class="content">
						<p>
							Däck ar en färskvara. Gamla däck och dåliga mönsersjup ökar risken för vattenplaning och dåliga grepp på halt underlag.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="quick-nav-container">
	</div>
</div>

Promo Ad Block Flex

This is a promo that displays 2 ad block each present a image next to a contentan. specific promo is used to displaying on IMF.

<div data-am-promo-container="flex swipeable" data-am-swipe-indicator data-swipe-container="[data-am-promo-container]" data-swipe-event="swipe" data-swipe-autoload="true">
	<div class="data-am-promo-wrapper">
		<div data-am-promo="ad-block">
			<div class="image-container ">
				<img src="/assets/toolkit/images/skoda/logo.png" alt="" class="image" />
			</div>
			<div class="content-container">
				<div class="content">
					<p>
						Du vet val att du far bra rabatter pa var hemforsakring pa If? Las mer pa <a href="">hemforsakring.if.se</a>. Added some more text to make this a bit longer, just to ensure how this will look with bigger text
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="data-am-promo-wrapper">
		<div data-am-promo="ad-block">
			<div class="image-container">
				<img src="/assets/toolkit/images/skoda/tire.png" alt="" class="image" />
			</div>
			<div class="content-container">
				<div class="content">
					<p>
						Däck ar en färskvara. Gamla däck och dåliga mönsersjup ökar risken för vattenplaning och dåliga grepp på halt underlag.
					</p>
				</div>
			</div>
		</div>
	</div>
	<div class="quick-nav-container">
	</div>
</div>

Promo Ad Block Real

This is a promo that displays 2 ad block each present a image next to a contentan. specific promo is used to displaying on IMF. This is copy-paste from real site

<div data-am-promo-container="flex ">

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>Bli helkund och få rabatt!</h3>
					<div>
						<p>Eftersom vi är en del av If får du upp till 27 % rabatt på din hemförsäkring. Ring&nbsp;<a href="#">1111-111 111</a>&nbsp;eller räkna ut ditt pris direkt.</p>
					</div>
					<div class="m-t-half">
						<a href="#" title="Räkna ut ditt pris" data-am-button="secondary compact" target="_blank">Räkna ut ditt
							pris</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>Vad tycker du?</h3>
					<div>
						<p>Vi förbättrar och utvecklar Mina sidor kontinuerligt och i det arbetet är dina åsikter väldigt
							värdefulla. Hjälp oss att bli bättre genom att svar på några snabba frågor</p>
						<p><a href="#" data-am-button="secondary compact" title="Lämna dina åsikter här" target="_blank">Lämna dina
								åsikter här</a>&nbsp;</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>Vad tycker du?</h3>
					<div>
						<p>Vi förbättrar och utvecklar Mina sidor kontinuerligt och i det arbetet är dina åsikter väldigt
							värdefulla. Hjälp oss att bli bättre genom att svar på några snabba frågor</p>
						<p><a href="#" data-am-button="primary compact" title="Lämna dina åsikter här" target="_blank">Lämna dina
								åsikter här</a>&nbsp;</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>Vad tycker du?</h3>
					<div>
						<p>Vi förbättrar och utvecklar Mina sidor kontinuerligt och i det arbetet är dina åsikter väldigt
							värdefulla. Hjälp oss att bli bättre genom att svar på några snabba frågor</p>
						<p><a href="#" data-am-button="accent compact" title="Lämna dina åsikter här" target="_blank">Lämna dina
								åsikter här</a>&nbsp;</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>Vad tycker du?</h3>
					<div>
						<p>Vi förbättrar och utvecklar Mina sidor kontinuerligt och i det arbetet är dina åsikter väldigt
							värdefulla. Hjälp oss att bli bättre genom att svar på några snabba frågor</p>
						<p><a href="#" data-am-link="primary-color" title="Lämna dina åsikter här" target="_blank">Lämna dina
								åsikter här</a>&nbsp;</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="data-am-promo-wrapper">
		<div data-am-promo="stacked">
			<div class="content-container">
				<div class="content">
					<h3>survey + survey</h3>
					<div>this is <a href="#" data-am-link=" primary-color" title="survey nr1" target="_blank">survey nr1</a>&nbsp;and this one <a href="#" data-am-button="secondary compact" title="survey nr2" target="_blank">survey nr2</a>&nbsp;</div>
				</div>
			</div>
		</div>
	</div>

</div>

Select

Select Inline

This is a select.

<div data-am-select="inline">
	<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>

Select Primary

This is a select. Changes dropdown arrow color to primary.

<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>

Select

This is a select.

<div data-am-select>
	<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>

Spinner

This is the spinner in its original form. When CSS animations is not supported by the browser, the SVG spinner will be replaced by a gif spinner instead. Unfortunately, @supports needs to be used which are not supported in any Internet Explorer versions. This means all unsupported browsers inclusive IE9-IE11 will have the gif displayed instead.

<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>

Inline

This is an inline spinner that can be placed next to any text. This could be useful when placing a spinner inside a button etc.

<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>

Block

This spinner is a block and will push other content. This spinner should be placed inside an elements before the element's content has been rendered since it has its own height.

<div data-am-spinner="block">
	<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>

Element

This spinner is absolute positioned and will cover the whole element. This spinner should be used when just a part of the site is loading. For this spinner to work, the element it is placed inside need to have position set to relative, absolute or fixed and have a reasonable height.

<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->

<div style="position: relative; height: 200px;">
	<div data-am-spinner="element">
		<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>
</div>

Overlay

This spinner is fixed and will be placed above all other elements on the site. This one should be used when the whole page is loading.

<!--
IMPORTANT: This structure contains inline CSS for styleguide display purpose only. Please remove all inline CSS before use in production
-->

<div style="position: relative; height: 250px;">
	<div data-am-spinner="overlay" style="position: absolute;">
		<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>
</div>

Sticky Action

This is a sticky action footer used to always display actions on a page.

Du har gjort 5 ändringar.

<div data-am-stickyaction style="position: relative;">
	<div class="sticky-action">
		<div class="sticky-action-content">
			<span class="font-bold">Du har gjort 5 ändringar.</span>
		</div>
		<div class="sticky-action-actions">
			<button data-am-button="primary" class="">Skicka ändringar</button>
			<button data-am-button="primary" class="" disabled>Skicka ändringar disabled</button>
		</div>
	</div>
</div>

Swipe Indicator

Swipe Indicator Scroll

This is a swipe indicator icon, which can be set on any element using data-am-swipe-* and data-swipe-*attributes.

Main activation attribute - <div data-am-swipe-indicator></div>
data-swipe-event="scroll" - swipe icon will be removed on scroll event of data-swipe-container
data-swipe-autoload="true" - swipe icon will be automatically added on <div data-am-swipe-indicator></div> element (setting attribute <div data-am-swipe-indicator="is-active"></div>)
Icon is visible only on mobile phones/tablets

NOTE: This example uses inline styling only for styleguide purposes

<div data-am-swipe-indicator data-swipe-container=".swipe-indicator-example" data-swipe-event="scroll" data-swipe-autoload="true">
	<div style="width: 200px; height: 200px; background-color: red;" class="swipe-indicator-example">
	</div>
</div>

Table

Table Insurance Policy

This is an advanced table.

2016-08-19

2016-08-19

2016-08-19

<div data-am-table>
	<div class="table-container">
		<div class="table">
			<div class="thead">
				<div class="tr">
					<div class="th"></div>
					<div class="th">
						<button class="table-filter">Datum<i class="icon-down-dir m-l-mini"></i></button>
					</div>
					<div class="th">
						<button class="table-filter">Namn</button>
					</div>
				</div>
			</div>
			<div class="tbody">
				<a href="#" title="" class="tr">
					<div class="row-heading">
						DEF 456 – Huvudförnyelse
					</div>
					<div class="td minimal image-icon hidden-lt-sm">
						<img src="/assets/toolkit/images/pdf_icon.png" alt="PDF Icon" />
					</div>
					<div class="td" data-heading="Datum">
						2016-08-19
					</div>
					<div class="td" data-heading="Namn">
						DEF 456 – Huvudförnyelse
					</div>
				</a>
				<a href="#" title="" class="tr">
					<div class="row-heading">
						DEF 456 – Huvudförnyelse
					</div>
					<div class="td minimal image-icon hidden-lt-sm">
						<img src="/assets/toolkit/images/pdf_icon.png" alt="PDF Icon" />
					</div>
					<div class="td" data-heading="Datum">
						2016-08-19
					</div>
					<div class="td" data-heading="Namn">
						DEF 456 – Huvudförnyelse
					</div>
				</a>
				<a href="#" title="" class="tr">
					<div class="row-heading">
						DEF 456 – Huvudförnyelse
					</div>
					<div class="td minimal image-icon hidden-lt-sm">
						<img src="/assets/toolkit/images/pdf_icon.png" alt="PDF Icon" />
					</div>
					<div class="td" data-heading="Datum">
						2016-08-19
					</div>
					<div class="td" data-heading="Namn">
						DEF 456 – Huvudförnyelse
					</div>
				</a>
			</div>
		</div>
	</div>
	<div class="table-footer">
		<a href="#" title="" data-am-link><i class="icon-down-dir m-r-mini"></i>Visa fler</a>
	</div>
</div>

Table Moment

This is an advanced table.

Glasskada

Till skada

Glasskada

1 600 kr

Aktiv

<div data-am-table>
	<div class="table-container">
		<div class="table">
			<div class="thead">
				<div class="tr">
					<div class="th">
						<button class="table-filter">Moment<i class="icon-down-dir m-l-mini"></i></button>
					</div>
					<div class="th">
						<button class="table-filter">Självrisk</button>
					</div>
					<div class="th">
						<button class="table-filter">Status</button>
					</div>
				</div>
			</div>
			<div class="tbody">
				<div class="tr">
					<div class="row-heading">
						<div data-am-columnrow="always">
							<div class="column">
								<i class="icon-calendar-check m-r-mini"></i>
								Glasskada
							</div>
							<div class="column">
								<a href="#" title="" data-am-link>Till skada<i class="icon-right-open m-l-mini"></i></a>
							</div>
						</div>
					</div>
					<div class="td" data-heading="Moment">
						Glasskada
					</div>
					<div class="td" data-heading="Självrisk">
						1 600 kr
					</div>
					<div class="td" data-heading="Status">
						Aktiv
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-footer">
		Inga ytterligare rapporterade skador
	</div>
</div>

Table

This is an advanced table.

Glasskada

Till skada

2016-08-19

Glasskada

1 600 kr

Avslutad

Till skada

Glasskada

Till skada

2016-08-19

Kollision med annat fordon

Se villkor

Avslutad

Till skada

<div data-am-table>
	<div class="table-container">
		<div class="table">
			<div class="thead">
				<div class="tr">
					<div class="th"></div>
					<div class="th">
						<button class="table-filter">Datum<i class="icon-down-dir m-l-mini"></i></button>
					</div>
					<div class="th">
						<button class="table-filter">Typ av skada</button>
					</div>
					<div class="th">
						<button class="table-filter">Självrisk</button>
					</div>
					<div class="th">
						<button class="table-filter">Status</button>
					</div>
					<div class="th"></div>
				</div>
			</div>
			<div class="tbody">
				<div class="tr">
					<div class="row-heading">
						<div data-am-columnrow="always">
							<div class="column">
								<i class="icon-dot text-secondary m-r-mini"></i>
								Glasskada
							</div>
							<div class="column">
								<a href="#" title="" data-am-link>Till skada<i class="icon-right-open m-l-mini"></i></a>
							</div>
						</div>
					</div>
					<div class="td minimal hidden-lt-sm">
						<i class="icon-dot text-secondary no-margin"></i>
					</div>
					<div class="td" data-heading="Datum">
						2016-08-19
					</div>
					<div class="td" data-heading="Typ av skada">
						Glasskada
					</div>
					<div class="td" data-heading="Självrisk">
						1 600 kr
					</div>
					<div class="td" data-heading="Status">
						Avslutad
					</div>
					<div class="td last-column hidden-lt-sm">
						<a href="#" title="" data-am-link="underline">Till skada</a>
					</div>
				</div>
				<div class="tr">
					<div class="row-heading">
						<div data-am-columnrow="always">
							<div class="column">
								<i class="icon-calendar-check text-primary m-r-mini"></i>
								Glasskada
							</div>
							<div class="column">
								<a href="#" title="" data-am-link>Till skada<i class="icon-right-open m-l-mini"></i></a>
							</div>
						</div>
					</div>
					<div class="td minimal hidden-lt-sm">
						<i class="icon-calendar-check text-primary no-margin"></i>
					</div>
					<div class="td" data-heading="Datum">
						2016-08-19
					</div>
					<div class="td" data-heading="Typ av skada">
						Kollision med annat fordon
					</div>
					<div class="td" data-heading="Självrisk">
						<a href="#" title="" data-am-link="underline">Se villkor</a>
					</div>
					<div class="td" data-heading="Status">
						Avslutad
					</div>
					<div class="td last-column hidden-lt-sm">
						<a href="#" title="" data-am-link="underline">Till skada</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-footer">
		Inga ytterligare rapporterade skador
	</div>
</div>

Table List

This component is used to list items in a grid.

2015-01-08

<div data-am-tablelist>
	<div class="list">
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-08-19</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-05-28</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Kollision med annat fordon</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2015-01-08</div>
			<div class="list-column">ABC 123</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
	</div>
</div>

Table List Compact

This component is used to list items in a compact grid.

2015-01-08

<div data-am-tablelist="compact">
	<div class="list">
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-08-19</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-05-28</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Kollision med annat fordon</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2015-01-08</div>
			<div class="list-column">ABC 123</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
	</div>
</div>

Table List Compact Without Background

This component is used to list items in a compact grid without background.

2015-01-08

<div data-am-tablelist="compact no-background">
	<div class="list">
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-08-19</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2016-05-28</div>
			<div class="list-column">DEF 456</div>
			<div class="list-column">Kollision med annat fordon</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
		<a href="#" title="" class="list-item">
			<div class="list-column">2015-01-08</div>
			<div class="list-column">ABC 123</div>
			<div class="list-column">Glasskada</div>
			<div class="list-column minimal"><i class="icon-right-dir no-margin text-secondary"></i></div>
		</a>
	</div>
</div>

Table List Claims Overview

Table list for Claims overview

2018-XX-XX

ŠKODA RAPID Spaceback