@internetstiftelsen/styleguide 2.22.1 → 2.22.3-beta.0.2

package/src/molecules/submenu/submenu.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		background_color: '#ffce2e',
+		icon_fill_color: '#1f2a36',
+		icon_background_hover_color: '#ffce2e',
+	},
+	variants: [
+		{
+			status: 'prototype',
+			name: 'With icons',
+			context: {
+				has_sublevel: true,
+				has_icons: true,
+				sublevel_has_icon: true
+			}
+		},
+		{
+			name: 'With sublevel',
+			context: {
+				has_sublevel: true,
+				sublevel_has_icon: false
+			}
+		}
+	]
+}

package/src/molecules/system-error/system-error.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		errorCode: '404',
+		preamble: 'Sidan du eftersökte kunde tyvärr inte hittas.',
+		suggestion: 'Försök <a href="#" class="js-history">backa i webbläsaren</a> eller gå till <a href="/">startsidan</a>.',
+		errorMessage: 'error - Sidan kan inte hittas'
+	}
+}

package/src/molecules/table/table.config.js

@@ -0,0 +1,55 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		th: 'Table header',
+		td: 'Table cell',
+		tfoot: 'Table footer',
+		td_num1: '42',
+		td_unit1: 'mkr',
+		td_num2: '10 000',
+		td_unit2: 'Mbit',
+		td_num3: '175 000 000',
+		td_unit3: '.se',
+		td_num4: '99',
+		td_unit4: 'kr/mån',
+		modifier: false
+	},
+	variants: [
+		{
+			name: 'columns',
+			context: {
+				modifier: 'm-table--columns',
+				scrollable: false
+			}
+		},
+		{
+			name: 'rows',
+			context: {
+				modifier: 'm-table--rows',
+				scrollable: false
+			}
+		},
+		{
+			name: 'Auto increment',
+			context: {
+				modifier: 'm-table--increment',
+				increment: true
+			}
+		},
+		{
+			name: 'lines',
+			context: {
+				modifier: 'm-table--lines',
+				scrollable: false
+			}
+		},
+		{
+			name: 'scrollable',
+			context: {
+				modifier: 'm-table--scrollable m-table--rows',
+				scrollable: true
+			}
+		},
+	]
+}

package/src/molecules/teaser-news-list/teaser-news-list.config.js

@@ -0,0 +1,47 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		title: 'Nyheter',
+		link_text: 'Nätneutraliteten och den svenska lagstiftningen',
+		background_image: '/assets/images/KPA_5090-5-4.jpg',
+		items: [
+			{
+				url: 'http://www.iis.se',
+				heading: 'Internetdagarna 2019',
+				time: '2018-12-04',
+				tags: [
+					{
+						text: 'stockholm',
+						url: '#'
+					},
+					{
+						text: 'göteborg',
+						url: '#'
+					}
+				]
+			},
+			{
+				url: 'http://www.iis.se',
+				heading: 'Lansering av Svenskarna och internet 2019',
+				time: '2019-01-22, Tid: 10:00',
+				tags: false
+			},
+			{
+				url: 'http://www.iis.se',
+				heading: 'Så säkrar du dina konton',
+				time: '2019-05-13',
+				tags: [
+					{
+						text: 'stockholm',
+						url: '#'
+					},
+					{
+						text: 'göteborg',
+						url: '#'
+					}
+				]
+			}
+		]
+	}
+}

package/src/organisms/accordion/accordion.config.js

@@ -0,0 +1,163 @@
+module.exports = {
+	status: 'ready',
+	context: {
+		has_background: false,
+		has_time: false,
+		accordion_item: [
+			{
+				heading: 'Quisque non molestie arcu',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false,
+				is_expanded: true
+			},
+			{
+				heading: 'Nullam neque diam, mattis nec cursus at',
+				content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+				color: false
+			},
+			{
+				heading: 'Suspendisse potenti',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false
+			},
+			{
+				heading: 'Mauris at risus pulvinar, scelerisque sapien',
+				content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+				color: false
+			},
+			{
+				heading: 'Proin faucibus pretium orci',
+				content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+				color: false
+			},
+			{
+				heading: 'Proin faucibus pretium orci',
+				content: false,
+				color: false
+			},
+		]
+	},
+	variants: [
+		{
+			status: 'wip',
+			name: 'Colored background',
+			context: {
+				has_background: true,
+				has_time: false,
+				accordion_item: [
+					{
+						heading: 'Keynote',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: 'peacock-light',
+						is_expanded: true
+					},
+					{
+						heading: 'Nullam neque diam, mattis nec cursus at',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: false
+					},
+					{
+						heading: 'Suspendisse potenti',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Lunch',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light'
+					},
+					{
+						heading: 'Proin faucibus pretium orci',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false
+					},
+					{
+						heading: 'Fika',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light'
+					},
+					{
+						heading: 'Keynote',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'peacock-light'
+					},
+				]
+			}
+		},
+		{
+			status: 'wip',
+			name: 'Has time',
+			context: {
+				has_background: true,
+				has_time: true,
+				accordion_item: [
+					{
+						heading: 'Keynote',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: 'peacock-light',
+						time: '10:00-10:30',
+						is_expanded: true
+					},
+					{
+						heading: 'Nullam neque diam, mattis nec cursus at',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: false,
+						time: '10:30-11:00',
+					},
+					{
+						heading: 'Suspendisse potenti',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '11:00-11:30',
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '11:30-12:00',
+					},
+					{
+						heading: 'Lunch',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light',
+						time: '12:00-13:00',
+					},
+					{
+						heading: 'Proin faucibus pretium orci',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '13:00-14:00',
+					},
+					{
+						heading: 'Potenti suspendisse',
+						content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>',
+						color: false,
+						time: '14:00-15:00',
+					},
+					{
+						heading: 'Fika',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'jade-light',
+						time: '15:00-15:30',
+					},
+					{
+						heading: 'Keynote',
+						content: '<ul><li>Quisque non molestie arcu</li><li>Nullam vehicula eros nec lorem congue mattis</li><li>Pellentesque rutrum lacinia diam in finibus</li><li>Mauris at risus pulvinar, scelerisque sapien</li></ul>',
+						color: 'peacock-light',
+						time: '16:00-17:00',
+					},
+				]
+			}
+		}
+	]
+}

package/src/organisms/domain-search/domain-search.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	status: 'ready',
+
+	context: {
+		hidden: 'false',
+		id: 'domain-search',
+		addidional_classes: 'o-domain-search--narrow',
+		label: 'sök en .se- eller .nu-domän'
+	}
+}

package/src/organisms/event-listing-item/event-listing-item.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+	status: "ready",
+	title: "Event listing",
+	context: {
+		borderColor: "ruby",
+	},
+	variants: [
+		{
+			name: "With jade border color",
+			context: {
+				borderColor: "jade",
+			},
+		},
+	],
+};

package/src/organisms/features-box/features-box.config.js

@@ -0,0 +1,227 @@
+module.exports = {
+	status: 'ready',
+	title: 'Features box',
+	context: {
+		color: 'snow',
+		padding: 'u-p-x-4 u-p-t-3 u-p-b-4',
+		height: '',
+		heading: false,
+		heading_classes: false,
+		button: true,
+		button_icon: 'plus',
+		button_text: 'Skapa event',
+		additional_classes: false,
+		button_modifiers: 'icon, lemon, icon-left o-features-box__button',
+		list_items: [
+			{
+				li_text: 'Max 40 personer',
+				icon: 'capacity'
+			},
+			{
+				li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+				icon: 'display'
+			},
+			{
+				li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+				icon: 'headset'
+			},
+			{
+				li_text: '5 headsets och 4 handmikrofoner',
+				icon: 'headset'
+			},
+			{
+				li_text: 'Riggat för livesändning',
+				icon: 'streaming'
+			},
+			{
+				li_text: 'Rullstolsanpassad lokal med ramp',
+				icon: 'accessibility'
+			},
+		]
+	},
+	variants: [
+		{
+			name: "headline",
+			context: {
+				padding: 'u-p-x-4 u-p-t-2 u-p-b-4',
+				heading: 'Vårt utbud i Stockholm',
+				heading_classes: 'u-m-b-2',
+				modifier: false,
+				button_classes: false,
+				button_modifiers: 'icon, icon-left, lemon o-features-box__button',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'display'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'headset'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: 'headset'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "large-text",
+			context: {
+				modifier: 'large-text',
+				color: 'lemon',
+				padding: 'u-p-x-6 u-p-t-4 u-p-b-6',
+				heading: 'Vårt utbud i Stockholm',
+				heading_classes: 'u-m-b-3 supersize',
+				additional_classes: false,
+				button: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'wifi'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'podcast'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: '3d'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+					{
+						li_text: 'kologiskt café med lunchservering',
+						icon: 'cafe'
+					},
+				]
+			}
+		},
+		{
+			name: "event-info",
+			context: {
+				modifier: false,
+				button: true,
+				button_icon: false,
+				button_text: 'Anmäl dig',
+				button_classes: false,
+				button_modifiers: 'lemon',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: 'Max 40 personer',
+						icon: 'capacity'
+					},
+					{
+						li_text: 'Bildskärm med anslutning via HDMI eller Mini Display Port',
+						icon: 'display'
+					},
+					{
+						li_text: 'Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam',
+						icon: 'headset'
+					},
+					{
+						li_text: '5 headsets och 4 handmikrofoner',
+						icon: 'headset'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "contact-info",
+			context: {
+				modifier: false,
+				button: true,
+				button_icon: false,
+				button_text: 'Alla kontaktuppgifter',
+				button_classes: false,
+				button_modifiers: 'lemon',
+				additional_classes: false,
+				list_items: [
+					{
+						li_text: '<span>Gradängen, Goto10</span><br /><span class="color-granit">Hammarby Slussväg 4, 118 60 Stockholm</span>',
+						icon: 'pin'
+					},
+					{
+						li_text: 'Vardagar: 8:00-17:00<br />Helger: Stängt',
+						icon: 'time'
+					},
+					{
+						li_text: '<a href="mailto:info@goto10.se">info@goto10.se</a>',
+						icon: 'email'
+					},
+					{
+						li_text: '<a href="tel:08-10 10 10">08–10 10 10</a>',
+						icon: 'phone'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+		{
+			name: "full-height",
+			context: {
+				modifier: false,
+				height: 'u-height-full',
+				additional_classes: false,
+				button: false,
+				list_items: [
+					{
+						li_text: '<span>Gradängen, Goto10</span><br /><span class="color-granit">Hammarby Slussväg 4, 118 60 Stockholm</span>',
+						icon: 'pin'
+					},
+					{
+						li_text: 'Vardagar: 8:00-17:00<br />Helger: Stängt',
+						icon: 'time'
+					},
+					{
+						li_text: 'Riggat för livesändning',
+						icon: 'streaming'
+					},
+					{
+						li_text: 'Rullstolsanpassad lokal med ramp',
+						icon: 'accessibility'
+					},
+				]
+			}
+		},
+	],
+};