@internetstiftelsen/styleguide 2.17.16 → 2.18.0-beta.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.17.16",
+	"version": "2.18.0-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -63,7 +63,6 @@
 		"onchange": "^6.1.0",
 		"postcss-cli": "^8.3.1",
 		"sass": "^1.35.1",
-		"sass-extract": "^2.1.0",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9",
 		"postcss-class-prefix": "^0.3.0"

package/src/_layout-logotypes.hbs

@@ -8,7 +8,6 @@
 			display: flex;
 			flex-direction: row;
 			flex-wrap: wrap;
-			height: 100vh;
 		}
 
 		.logotype-wrapper {

package/src/_logotype-sprite.hbs

@@ -15,8 +15,7 @@
 		<symbol id="logotype-vertical" viewbox="0 0 34 324">
 			<path fill="#ff4069" d="M34 4.1v8.1h-3.8v4.1h-3.8v4.1h-3.8v4H19v4.1h-4.1v-4.1h-3.7v-4H7.5v-4.1H3.8v-4.1H0V4.1h3.8V0H15v4.1h4V0h11.3v4.1H34z"/><path fill="#ffffff" d="M28.6 6.8v2.7h-5.2V4.1H26v2.7h2.6z"/><path d="M12.6 184c-3.2 0-5.6-3-5.6-7.1 0-4.3 2.3-7.1 6.1-7.4h.2v3h-.2c-2.8.3-3.5 2.5-3.5 4.4 0 1.9.7 4.2 2.8 4.2 1.4 0 2.2-.8 2.8-2.7l1-3.6c.9-3.1 2.6-4.6 5.5-4.6 3 0 5.2 2.7 5.2 6.5 0 4-2.1 6.5-5.7 6.8H21v-3h.2c2-.2 3-1.5 3-3.9 0-2.2-.9-3.6-2.4-3.6s-2.2.7-2.8 2.8l-.8 3c-.3 1.3-.8 2.6-1.6 3.5-1 1-2.2 1.7-4 1.7zm14 15h-2.7v-5.5H7.4v-3h16.4V185h2.7v14zm-2.7 22h-5.3v8.1h-2.7V221H7.4v-3h19.2v11.8h-2.7V221zm2.7 25.3h-2.7v-5.5H7.4v-3h16.4v-5.5h2.7v14zm-2.7 5.5h-5.3v8.4h-2.7v-8.4h-5.7v9.6H7.4v-12.6h19.2v12.6h-2.7v-9.6zm-13.8 24H7.4v-11.3h19.2v3H10.1v8.3zm2.5 15.3c-3.2 0-5.6-3-5.6-7.1 0-4.2 2.3-7.1 6.1-7.4h.2v3h-.2c-2.8.3-3.5 2.5-3.5 4.4s.7 4.2 2.8 4.2c1.4 0 2.2-.8 2.8-2.6l1-3.6c.9-3.1 2.6-4.6 5.5-4.6 3 0 5.2 2.7 5.2 6.5 0 4.1-2.1 6.6-5.7 6.9H21v-3h.2c2-.2 3-1.5 3-3.9 0-2.2-.9-3.6-2.4-3.6s-2.2.7-2.8 2.8l-.8 3c-.7 2.4-2 5-5.6 5zm11.3 6h-5.3v8.4h-2.7v-8.4h-5.7v9.6H7.4v-12.6h19.2v12.6h-2.7v-9.6zm2.7 26.9H7.4v-4l14.7-7.1.5-.3H7.4v-2.9h19.2v4l-15.1 7.4h15.1v2.9zm-2.7-114.1H10.1v4.7H7.4V202h2.7v4.9h13.7V202h2.7v12.6h-2.7v-4.7zm2.7-141.2H7.4v-4l14.7-7.1.5-.3H7.4v-2.9h19.2v4l-15.1 7.4h15.1v2.9zm0 16.6h-2.7v-5.5H7.4v-3h16.4v-5.5h2.7v14zM23.9 91h-5.3v8.4h-2.7V91h-5.7v9.6H7.4V88h19.2v12.6h-2.7V91zm-8.5 22v.2c.2 1.1.6 2 1.4 2.7.9.9 2.2 1.4 4.1 1.4 1.9 0 3.2-.5 4.2-1.4.9-1 1.4-2.5 1.4-4.5v-7.1H7.4v3h7.9v2.7h-.1l-7.8 4.2v3.4l8-4.6zm2.6-5.9h5.9v5.1c0 1.2-.7 1.9-1.8 1.9h-2c-1 0-1.9-.6-1.9-1.9v-5.1H18zm8.6 28.2H7.4v-3.9l14.7-7.2.5-.3H7.4v-2.8h19.2v3.9l-15.1 7.4h15.1v2.9zm-2.7 6.6h-5.3v8.4h-2.7v-8.4h-5.7v9.6H7.4v-12.6h19.2v12.6h-2.7v-9.6zm2.7 26.5h-2.7v-5.5H7.4v-3h16.4v-5.5h2.7v14zM23.9 46H10.3v4.8H7.5V38.2h2.7V43h13.6v-4.8h2.7v12.6h-2.7V46z"/>
 		</symbol>
-		<symbol id="logotype-goto10" viewbox="0 0 211 60">
-			<path d="M29.5 14.5V31h-4.3l-.5-4.3c-1.6 2.9-4.9 4.7-9 4.7C5.7 31.4 1 24.1 1 15.7S5.6 0 15.7 0C21.5-.2 26.8 3.3 29 8.8l-4.8 2c-1.1-3.7-4.6-6.2-8.5-6-6.4 0-9.2 5.1-9.2 10.7 0 6.1 2.8 11 9.3 11 4.8 0 8.1-2.6 8.3-7.6h-6.7v-4.4h12.1zm3.4 5.6c-.2-6 4.5-10.9 10.4-11.1h.6c6-.1 10.9 4.6 11 10.6v.5c0 6.1-4.4 11.3-11 11.3s-11-5.2-11-11.3zm16.5 0c0-3.5-1.6-6.6-5.5-6.6s-5.5 3.1-5.5 6.6 1.6 6.7 5.6 6.7 5.4-3.1 5.4-6.7zm9.8 4.9V13.8h-3.5V9.4h3.5V4.1L64.4.3v9.1h5.4v4.4h-5.4v10.3c0 2.1 1 2.7 2.4 2.7 1 0 2.1-.3 3-.8v4.8c-1.3.4-2.6.6-3.9.6-4.2 0-6.7-2.5-6.7-6.4zm13.3-4.9c0-6.1 4.9-11 11-11s11 4.9 11 11-4.4 11.3-11 11.3-11-5.2-11-11.3zm16.5 0c0-3.5-1.6-6.6-5.5-6.6-4 0-5.5 3.1-5.5 6.6s1.6 6.7 5.5 6.7c3.9.1 5.5-3.1 5.5-6.7zM113.4.5V31H108V9.4h-7.1V5.3h4.1c2.1 0 3.2-.9 3.2-2.9V.5h5.2zm5.3 15.2c0-6.5 1-15.7 10.3-15.7 8.4 0 10.5 8.2 10.5 15.8s-2.1 15.6-10.2 15.6c-9.4 0-10.6-9.2-10.6-15.7zm15.2 0c0-4.9-.1-10.4-4.9-10.4-4.8 0-4.9 5.6-4.9 10.5s.1 10.5 5.1 10.5c4.6-.1 4.7-5.8 4.7-10.6z"/><path fill="#ff4069" d="M211 45.5v4.9h-2.2v2.4h-2.2v2.4h-2.2v2.4h-2.2V60h-2.4v-2.4h-2.2v-2.4h-2.2v-2.4h-2.2v-2.4H191v-4.9h2.2v-2.4h6.6v2.4h2.4v-2.4h6.6v2.4h2.2z"/><path fill="#ffffff" d="M207.7 47.1v1.6h-3v-3.2h1.5v1.6h1.5z"/><path d="M94.9 54.3c0 2-1.9 3.5-4.5 3.5s-4.5-1.5-4.7-3.8v-.1h1.9v.1c.2 1.8 1.6 2.2 2.8 2.2s2.7-.5 2.7-1.8c0-.9-.5-1.4-1.7-1.8L89 52c-2-.6-3-1.7-3-3.5s1.8-3.3 4.2-3.3c2.6 0 4.2 1.3 4.4 3.6v.2h-1.8v-.1c-.1-1.3-.9-1.9-2.5-1.9-1.5 0-2.3.6-2.3 1.6s.4 1.4 1.8 1.8l1.9.5c.8.2 1.6.5 2.2 1 .7.5 1.1 1.5 1 2.4zm9.7-8.8v1.7H101v10.4h-1.9V47.2h-3.5v-1.7h9zm14 1.7v3.3h5.2v1.7h-5.2v5.3h-1.9v-12h7.5v1.7h-5.6zm16.2-1.7v1.7h-3.5v10.4h-1.9V47.2h-3.5v-1.7h8.9zm3.5 1.7v3.3h5.4v1.7h-5.4v3.6h6.2v1.7h-8.1v-12h8.1v1.7h-6.2zm15.4 8.6v1.7h-7.3v-12h1.9v10.4h5.4zm10.1-1.5c0 2-1.9 3.5-4.5 3.5s-4.5-1.5-4.7-3.8v-.1h1.9v.1c.2 1.8 1.6 2.2 2.8 2.2 1.2 0 2.7-.5 2.7-1.8 0-.9-.5-1.4-1.7-1.8L158 52c-2-.6-2.9-1.7-2.9-3.5s1.8-3.3 4.2-3.3c2.6 0 4.2 1.3 4.4 3.6v.1h-1.8v-.1c-.1-1.3-.9-1.9-2.5-1.9s-2.3.6-2.3 1.6.4 1.4 1.8 1.8l1.9.5c1.4.4 3 1.2 3 3.5zm4.2-7.1v3.3h5.4v1.7H168v3.6h6.2v1.7h-8.1v-12h8.1v1.7H168zm17.7-1.7v12.1h-2.5l-4.6-9.3-.2-.4v9.6h-1.8v-12h2.5l4.8 9.6v-9.6h1.8zm-74.2 1.7v8.7h3.1v1.7h-8v-1.7h3.1v-8.7h-3.1v-1.7h8v1.7h-3.1zm-90.6-1.7v12.1h-2.5l-4.6-9.3-.2-.4v9.6h-1.8v-12h2.5L19 55v-9.6h1.9zm10.6 0v1.7H28v10.4h-1.9V47.2h-3.5v-1.7h8.9zm3.6 1.7v3.3h5.4v1.7h-5.4v3.6h6.2v1.7h-8.1v-12h8.1v1.7h-6.2zm14 5.3h.1c.7-.1 1.3-.4 1.7-.9.7-.7 1-1.7.9-2.6.1-1-.3-1.9-1-2.6-.8-.7-1.9-1-2.9-.9h-4.5v12.1h1.9v-5H47l2.7 5H52l-2.9-5.1zm-3.7-1.6v-3.7h3.3c.6-.1 1.2.3 1.2.9v1.5c0 .6-.4 1.2-1.1 1.2H45.4zm18-5.4v12.1h-2.5l-4.6-9.3-.2-.4v9.6h-1.9v-12h2.5l4.7 9.6v-9.6h2zm4.6 1.7v3.3h5.4v1.7H68v3.6h6.2v1.7h-8.1v-12h8.1v1.7H68zm16.9-1.7v1.7h-3.5v10.4h-1.9V47.2H76v-1.7h8.9zM6.3 47.2v8.6h3.1v1.7h-8v-1.7h3.1v-8.6H1.3v-1.7h8v1.7h-3z"/>
+		<symbol id="logotype-goto10" viewbox="0 0 237.43 60"><circle fill="#fecd2e" cx="59.36" cy="19.79" r="19.79"/><circle fill="#fecd2e" cx="138.5" cy="19.79" r="19.79"/><circle fill="#fecd2e" cx="217.64" cy="19.79" r="19.79"/><path fill="#fecd2e" d="M79.14 0v19.79h9.89v19.78h19.79V19.79h9.89V0zM178.07 0h-7.42v19.79h7.42v19.78h19.79V0zM19.79 0C8.86 0 0 8.86 0 19.79s8.86 19.79 19.79 19.79 19.79-8.86 19.79-19.79H19.79V0z"/><path d="M70.97 55.69c0 1.55-1.44 2.67-3.44 2.67-2.08 0-3.46-1.11-3.6-2.9v-.1h1.44v.08c.15 1.34 1.23 1.63 2.12 1.63s2.02-.35 2.02-1.36c0-.69-.38-1.09-1.3-1.35l-1.75-.49c-1.53-.43-2.23-1.25-2.23-2.61 0-1.44 1.33-2.48 3.17-2.48 1.97 0 3.18 1 3.33 2.73v.1H69.3v-.09c-.09-.96-.72-1.45-1.89-1.45-1.08 0-1.75.45-1.75 1.18s.35 1.08 1.38 1.36l1.44.41c.63.14 1.22.41 1.73.8.52.49.8 1.17.76 1.87zM78.31 48.99v1.31h-2.68v7.87h-1.45V50.3H71.5v-1.31zM89.01 50.3v2.53h3.94v1.32h-3.94v4.02h-1.45v-9.18h5.71v1.31zM101.27 48.99v1.31H98.6v7.87h-1.45V50.3h-2.68v-1.31zM103.94 50.3v2.53h4.09v1.32h-4.09v2.7h4.7v1.32h-6.15v-9.18h6.15v1.31zM115.64 56.85v1.32h-5.51v-9.18h1.44v7.86zM123.07 55.69c0 1.55-1.45 2.67-3.44 2.67-2.08 0-3.46-1.11-3.6-2.9v-.1h1.44v.08c.15 1.34 1.24 1.63 2.13 1.63s2.02-.35 2.02-1.36c0-.69-.37-1.09-1.29-1.35l-1.76-.49c-1.52-.43-2.23-1.25-2.23-2.61 0-1.44 1.34-2.48 3.17-2.48 1.97 0 3.19 1 3.34 2.73v.1h-1.44v-.09c-.08-.96-.72-1.45-1.89-1.45-1.08 0-1.75.45-1.75 1.18s.35 1.08 1.38 1.36l1.42.41c1.24.34 2.5.91 2.5 2.67zM125.94 50.3v2.53h4.1v1.32h-4.1v2.7h4.71v1.32h-6.16v-9.18h6.16v1.31zM139.05 48.99v9.18h-1.93l-3.48-7.04-.14-.27v7.31h-1.39v-9.18h1.91l3.62 7.26v-7.26zM83.58 50.3v6.55h2.32v1.32h-6.12v-1.32h2.35V50.3h-2.35v-1.31h6.12v1.31zM14.96 48.99v9.17h-1.92l-3.48-7.03-.13-.27v7.3H8.02v-9.17h1.93l3.61 7.26v-7.26zM23.07 48.99v1.31h-2.69v7.86h-1.45V50.3h-2.67v-1.31zM25.8 50.3v2.53h4.1v1.31h-4.1v2.71h4.7v1.31h-6.14v-9.17h6.14v1.31zM36.47 54.31l.09-.02c.49-.07.96-.31 1.31-.67.49-.53.73-1.25.68-1.97 0-.91-.23-1.57-.69-2-.46-.44-1.22-.67-2.2-.67H32.2v9.18h1.44v-3.81h1.33v.03l2.08 3.77h1.66l-2.24-3.84zM33.6 53.1v-2.8h2.52c.46-.06.88.28.93.74.01.05.01.1.01.15v.98c.03.49-.34.9-.83.94H33.6zM47.34 48.99v9.17h-1.92l-3.48-7.03-.13-.27v7.3H40.4v-9.17h1.93l3.6 7.26v-7.26zM50.53 50.3v2.53h4.09v1.31h-4.09v2.71h4.7v1.31h-6.15v-9.17h6.15v1.31zM63.38 48.99v1.31H60.7v7.87h-1.45V50.3h-2.68v-1.31zM3.91 50.3v6.53h2.32v1.31H.12v-1.31h2.34V50.3H.12v-1.31h6.11v1.31z"/><path d="M156.62 48.99v-1.83h-4.98v1.83h-1.8v-1.83h-4.98v1.83h-1.66v3.67h1.66v1.83h1.65v1.83h1.66v1.84h1.66V60h1.8v-1.83h1.66v-1.84h1.67V54.5h1.66v-1.83h1.67V49h-1.67zm-.48 2.43h-2.31v-2.44h1.18v1.23h1.13v1.21z" style="fill:#ff4069"/><path style="fill:#fff" d="M153.83 48.99v2.43h2.31v-1.2h-1.13v-1.23z"/>
 		</symbol>
 		<symbol id="logotype-bredbandskollen" viewbox="0 0 315 60">
 			<path d="M.8 0h10.6c4.6 0 9.8 2.1 9.8 8.3 0 2.5-1.3 4.8-3.4 6.1 2.9 1.4 4.8 4.3 4.9 7.5 0 5.7-4.8 8.9-10 8.9H.8V0zm11.1 12.4c2.1 0 4.2-.8 4.2-3.8 0-2.4-2-3.6-4.6-3.6H6.3v7.4h5.6zm.9 13.1c2.8 0 4.5-1.4 4.5-4.3 0-2.2-1.8-4-4.7-4H6.3v8.3h6.5zM26.5 9h5.1v3.7c.9-2.5 3.2-4.1 5.8-4.1 1.5 0 2.9.5 4 1.6L39 14.5c-.7-.5-1.5-.7-2.3-.7-2.5 0-5 2.3-5 7.8v9.2h-5.1L26.5 9zm14.8 10.9c0-5.7 3.3-11.4 10.6-11.4 7.6 0 10 6.1 10 11 0 .7 0 1.4-.2 2.1H46.8c.5 2.8 2 4.8 5.4 4.8 2 .1 3.9-.8 5.2-2.3l3.6 3.2c-2.2 2.6-5.5 4-8.9 3.9-7.3 0-10.8-5.4-10.8-11.3zm15.4-2.1c0-.5-.1-.9-.2-1.4-.5-2.1-2.5-3.6-4.7-3.4-3.1 0-4.5 2-5 4.8h9.9zm7.7 2.1c0-6 3.3-11.3 9.3-11.3 2.3-.1 4.6.9 6.1 2.6V0h5.4v30.7h-4.9l-.3-2.4c-1.5 1.9-3.8 3-6.3 2.9-6 0-9.3-5.3-9.3-11.3zm15.8 0c0-3.7-1.6-6.5-5.2-6.5s-5.3 2.9-5.3 6.5 1.6 6.5 5.3 6.5c3.6 0 5.2-2.8 5.2-6.5zm15.1 8.7v2.2h-5.5V0h5.5v11.2c1.5-1.8 3.7-2.7 6-2.6 6 0 9.3 5.3 9.3 11.3s-3.3 11.3-9.2 11.3c-2.4.1-4.6-.9-6.1-2.6zm10-8.7c0-3.6-1.6-6.5-5.3-6.5-3.6 0-5.3 2.8-5.3 6.5s1.7 6.4 5.3 6.4c3.7 0 5.3-2.8 5.3-6.4zm26.7-2.3v13.2h-4.3l-.3-2.9c-1.6 2.2-4.1 3.4-6.7 3.3-4.4 0-7.8-2.6-7.8-7.1 0-4.7 3.7-6.3 8.6-6.3h5.8c-.1-3.2-1-4.6-4.5-4.6-2.1 0-4.1 1.2-5.1 3l-4-2.9c2-3 5.4-4.8 9-4.8 5.8 0 9.3 3.7 9.3 9.1zm-4.8 4.2v-.2h-5.6c-2.4 0-3.5 1.3-3.5 2.6s1.1 2.5 3.5 2.5c2.9.1 5.3-2.1 5.6-4.9zM136 9h5.3v2.5c1.6-1.9 3.9-3 6.3-3 5.7 0 7.9 4.6 7.9 9.1v13h-5.3V18.4c0-2.9-1.4-4.9-4.1-4.9-3 0-4.8 1.6-4.8 5.4v11.9H136V9zm22.7 10.9c0-6 3.3-11.3 9.3-11.3 2.3-.1 4.6.9 6.1 2.6V0h5.3v30.7h-4.9l-.2-2.5c-1.5 1.9-3.8 3-6.3 2.9-6 .1-9.3-5.2-9.3-11.2zm15.9 0c0-3.7-1.6-6.5-5.2-6.5s-5.3 2.9-5.3 6.5 1.6 6.5 5.3 6.5c3.6 0 5.2-2.8 5.2-6.5zm7.9 5.2l4.2-1.8c.6 1.6 1.7 3.6 4.6 3.6 2.4 0 3.5-1.4 3.5-2.6 0-3.7-10.8-1.2-10.8-8.9 0-4.6 3.8-6.8 8-6.8 3.4-.1 6.6 1.7 8.2 4.7l-4.1 2.2c-.8-1.7-2.4-2.8-4.3-2.8-1.7 0-2.8.8-2.8 1.9 0 3.3 11 1.3 11 9.3 0 5-4.3 7.2-8.4 7.2-4.1.2-7.7-2.2-9.1-6zm21-25.1h5.3v18l8.1-9h6.8l-8.1 8.4 9 13.3h-6.2l-6.3-10.1-3.3 3.7v6.4h-5.3V0zM224.3 19.8c0-6.1 4.9-11.1 11.1-11.1 6.1 0 11.1 5 11.1 11.1 0 6.2-4.4 11.4-11 11.4s-11.2-5.2-11.2-11.4zm16.6 0c0-3.6-1.6-6.7-5.6-6.7s-5.6 3.1-5.6 6.7 1.6 6.8 5.6 6.8c4 0 5.6-3.2 5.6-6.8zm8.9 6.6V0h5.3v24.9c0 1 .7 1.5 1.7 1.5.5 0 1-.1 1.4-.1v4.5c-1.3.3-2.6.4-3.9.4-2.5 0-4.5-1-4.5-4.8zm11.6 0V0h5.3v24.9c0 1 .7 1.5 1.7 1.5.5 0 1-.1 1.4-.1v4.5c-1.3.3-2.6.4-3.9.4-2.5 0-4.5-1-4.5-4.8zm9.8-6.5c0-5.7 3.3-11.4 10.6-11.4 7.6 0 10 6.1 10 11 0 .7 0 1.4-.2 2.1h-14.9c.5 2.8 2 4.8 5.4 4.8 2 .1 3.9-.8 5.2-2.3l3.6 3.2c-2.2 2.6-5.5 4-8.9 3.9-7.3 0-10.8-5.4-10.8-11.3zm15.4-2.1c0-.5 0-.9-.2-1.4-.5-2.1-2.5-3.6-4.7-3.4-3.1 0-4.5 2-5 4.8h9.9zm7.9-8.8h5.3v2.5c1.6-1.9 3.9-3 6.3-3 5.7 0 7.9 4.6 7.9 9.1v13h-5.3V18.4c0-2.9-1.4-4.9-4.1-4.9-3 0-4.8 1.6-4.8 5.4v11.9h-5.3V9z"/><path fill="#ff4069" d="M210.6 45.3v4.9h-2.2v2.4h-2.2V55H204v2.4h-2.2V60h-2.4v-2.4h-2.2v-2.4H195v-2.4h-2.2v-2.4h-2.2v-4.9h2.2v-2.4h6.6v2.4h2.4v-2.4h6.6v2.4h2.2z"/><path fill="#ffffff" d="M207.8 47v1.6h-3v-3.2h1.6V47h1.4z"/><path d="M94 54.3c0 2-1.9 3.6-4.5 3.6s-4.6-1.5-4.8-3.9v-.1h1.9v.1c.2 1.8 1.6 2.2 2.8 2.2 1.2 0 2.7-.5 2.7-1.8 0-.9-.5-1.4-1.7-1.8l-2.3-.7c-2-.6-3-1.7-3-3.5s1.8-3.3 4.2-3.3c2.6 0 4.2 1.3 4.4 3.6v.1h-1.8v-.1c-.1-1.3-1-1.9-2.5-1.9s-2.3.6-2.3 1.6.4 1.4 1.8 1.8l1.9.5c.8.2 1.6.5 2.3 1.1.6.6 1 1.5.9 2.5zm9.7-9V47h-3.6v10.5h-1.9V47.1h-3.5v-1.7h9zm14.1 1.8v3.4h5.2v1.8h-5.2v5.4h-1.9V45.3h7.5V47h-5.6zm16.2-1.8V47h-3.5v10.5h-1.9V47.1H125v-1.7h9zm3.6 1.8v3.4h5.4v1.8h-5.4v3.6h6.2v1.8h-8.1V45.3h8.1V47h-6.2zm15.4 8.7v1.8h-7.3V45.3h1.9v10.5h5.4zm10.3-1.5c0 2-1.9 3.6-4.5 3.6s-4.6-1.5-4.8-3.9v-.1h1.9v.1c.2 1.8 1.6 2.2 2.8 2.2 1.2 0 2.7-.5 2.7-1.8 0-.9-.5-1.4-1.7-1.8l-2.3-.7c-2-.6-2.9-1.7-2.9-3.5s1.8-3.3 4.2-3.3c2.6 0 4.2 1.3 4.4 3.6v.1H161v-.1c-.1-1.3-1-1.9-2.5-1.9s-2.3.6-2.3 1.6.4 1.4 1.8 1.8l1.9.5c1.7.5 3.4 1.2 3.4 3.6zm4.1-7.2v3.4h5.4v1.8h-5.4v3.6h6.2v1.8h-8.1V45.3h8.1V47h-6.2zm17.8-1.8v12.2h-2.5l-4.6-9.4-.2-.4v9.7H176V45.3h2.5l4.8 9.7v-9.7h1.9zm-74.5 1.8v8.8h3.1v1.7h-8.1v-1.7h3.1v-8.8h-3.1v-1.7h8.1v1.7h-3.1zm-91.1-1.8v12.2h-2.5l-4.6-9.4-.2-.4v9.7h-1.9V45.3H13l4.8 9.7v-9.7h1.8zm10.7 0V47h-3.5v10.5h-1.9V47.1h-3.5v-1.7h8.9zm3.6 1.8v3.4h5.4v1.7h-5.4v3.6h6.2v1.7H32V45.3h8.1V47c0 .1-6.2.1-6.2.1zM48 52.4h.1c.7-.1 1.3-.4 1.7-.9.6-.7 1-1.7.9-2.6.1-1-.3-2-.9-2.7-.8-.7-1.9-1-2.9-.9h-4.6v12.2h1.9v-5H46v.1l2.8 5H51l-3-5.2zm-3.7-1.6v-3.7h3.3c.6-.1 1.2.4 1.2 1v1.5c0 .6-.4 1.2-1.1 1.2h-3.4zm18.1-5.5v12.2h-2.5l-4.6-9.4-.2-.4v9.7h-1.9V45.3h2.5l4.8 9.7v-9.7h1.9zm4.6 1.8v3.4h5.4v1.7H67v3.6h6.2v1.7h-8.1V45.3h8.1V47c0 .1-6.2.1-6.2.1zm17-1.8V47h-3.5v10.5h-1.9V47.1H75v-1.7h9zM5 47.1v8.7h3.1v1.7H0v-1.7h3.1v-8.7H0v-1.7h8.1v1.7H5z"/>

package/src/app.scss

@@ -40,6 +40,8 @@ $namespace: '';
 @import 'atoms/file/file';
 @import 'atoms/ribbon/ribbon';
 @import 'atoms/quote/quote';
+@import 'atoms/rating/rating';
+@import 'atoms/timeline/timeline';
 
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';

package/src/assets/js/youtube.js

@@ -16,7 +16,7 @@ function onPlayerReady(el, e) {
 function onPlayerStateChange(el, e) {
 	if (e.data === YT.PlayerState.PLAYING) {
 		el.getElementsByTagName('img')[0].style.zIndex = '-1';
-		el.getElementsByTagName('svg')[0].style.display = 'none';
+		el.getElementsByTagName('button')[0].style.display = 'none';
 	}
 }
 

package/src/atoms/button/_button.scss

@@ -219,6 +219,13 @@
 			height: $icon-size;
 			fill: $color-cyberspace;
 		}
+
+		@include m(small-icon) {
+			@include e(icon) {
+				width: $icon-size-small;
+				height: $icon-size-small;
+			}
+		}
 	}
 
 	@include m(cyberspace) {
@@ -364,11 +371,18 @@
 	@include m(peacock) {
 		color: $color-peacock;
 
-		&:hover,
-		&:focus {
+		&:hover {
 			color: $color-peacock-light;
 		}
 
+		&:focus {
+			color: $color-peacock;
+		}
+
+		&:hover:focus {
+			color: $color-peacock;
+		}
+
 		@include e(text) {
 			color: $color-cyberspace;
 		}
@@ -382,9 +396,16 @@
 		box-shadow: 0 0 0 1px inset $color-peacock;
 		color: $color-peacock-light;
 
-		&:hover,
+		&:hover {
+			color: $color-peacock;
+		}
+
 		&:focus {
-			background-color: $color-peacock;
+			color: $color-peacock-light;
+		}
+
+		&:hover:focus {
+			color: $color-peacock-light;
 		}
 
 		@include e(text) {

package/src/atoms/button/button.config.js

@@ -5,6 +5,7 @@ module.exports = {
 	context: {
 		url: '#',
 		text: 'Primary button',
+		alternative_text: false,
 		button_type: false,
 		type: false,
 		id: false,

package/src/atoms/button/button.hbs

@@ -6,7 +6,7 @@
 	{{{attr attributes}}}
 	{{#if aria_controls}}aria-controls="{{ aria_controls }}"{{/if}}
 >
-	<span class="a-button__text">{{ text }}</span>
+	<span class="a-button__text"{{#if alternative_text}} data-alternative-text="{{alternative_text}}{{/if}}">{{ text }}</span>
 	{{#if icon}}
 	{{> @icon id=icon additional_classes="a-button__icon"}}
 	{{/if}}

package/src/atoms/file/file.hbs

@@ -1,7 +1,7 @@
 <div class="field-group{{#unless has_preview}} align-items-center{{/unless}}">
 	{{#if has_preview}}
 	<div class="a-file-preview" data-label="Förhandsvisning">
-		<img data-id="filePreview" alt="Förhandsvisning" src="null">
+		<img data-id="filePreview" alt="Förhandsvisning" src="">
 	</div>
 	{{/if}}
 	<input type="{{type}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} class="a-file {{#if modifier}} {{modifier}}{{/if}}"  data-multiple-caption="{count} filer valda" {{#if is_multiple}} multiple{{/if}} {{#if has_preview}}accept=".jpg, .jpeg, .png, .gif" data-id="fileInput"{{/if}}>

package/src/atoms/file/filePreview.js

@@ -25,7 +25,7 @@ Array.prototype.forEach.call(fileInputs, (fileInput) => {
 		};
 
 		removebutton.addEventListener('click', () => {
-			filePreview.src = null;
+			filePreview.src = '';
 		});
 	}
 

package/src/atoms/main-menu/_main-menu.scss

@@ -15,6 +15,7 @@
 		li {
 			display: flex;
 			align-items: center;
+			position: relative;
 
 			&:last-child {
 				#{$root}#{$element-separator}link {
@@ -193,4 +194,64 @@
 			pointer-events: none;
 		}
 	}
+
+	@include e(subnav) {
+		position: absolute;
+		left: 0;
+		top: calc(100% - #{rhythm(1)});
+		margin: 0;
+		padding: 0;
+		background-color: $color-snow;
+		border: 1px solid $color-ash;
+
+		&::after,
+		&:before {
+			bottom: 100%;
+			left: rhythm(4);
+			border: solid transparent;
+			content: '';
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+		}
+
+		&::after {
+			border-color: rgba(255, 255, 255, 0);
+			border-bottom-color: $color-snow;
+			border-width: 15px;
+			margin-left: -15px;
+		}
+		&::before {
+			border-color: rgba(238, 238, 238, 0);
+			border-bottom-color: $color-ash;
+			border-width: 16px;
+			margin-left: -16px;
+		}
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+
+		@include e(item) {
+			width: 100%;
+
+			& + & {
+				border-top: 1px solid $color-ash;
+			}
+
+			a {
+				color: $color-cyberspace;
+				display: block;
+				width: 100%;
+				padding: rhythm(0.5) rhythm(2);
+				text-decoration: none;
+				white-space: nowrap;
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
 }

package/src/atoms/main-menu/main-menu.config.js

@@ -25,11 +25,14 @@ module.exports = {
 				hide_mobile: true
 			},
 			{
-				text: 'Om oss',
-				url: '#',
+				text: 'Ämnen',
+				url: false,
 				is_current: false,
-				icon: false,
-				hide_mobile: true
+				icon: 'icon-arrow-down',
+				hide_mobile: true,
+				has_dropdown: true,
+				has_expandable: true,
+				controls: 'dropdown'
 			},
 			{
 				text: 'Bli medlem',

package/src/atoms/main-menu/main-menu.hbs

@@ -37,6 +37,38 @@
 				{{/if}}
 				{{#if url}}</a>{{else}}</button>{{/if}}
 			{{/if}}
+
+			{{#if has_dropdown}}
+				<ul id="dropdown" class="a-main-menu__subnav u-box-shadow-card">
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Desinformation</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Föräldraskap</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Integritet</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Källkritik</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Ordlista</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Så funkar internet</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Sökkritik</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Vanliga IT-brott</a>
+					</li>
+					<li class="a-main-menu__subnav__item">
+						<a href="#">Yttrandefrihet</a>
+					</li>
+				</ul>
+			{{/if}}
 		</li>
 		{{/each}}
 </ul>

package/src/atoms/meta/_meta.scss

@@ -43,4 +43,8 @@
 	@include m(lowercase) {
 		text-transform: initial;
 	}
+
+	@include m(wrap) {
+		white-space: normal;
+	}
 }

package/src/atoms/meta/meta.config.js

@@ -6,6 +6,7 @@ module.exports = {
 		icon: false,
 		is_light: false,
 		lowercase: false,
+		additional_classes: false,
 	},
 	variants: [
 		{

package/src/atoms/meta/meta.hbs

@@ -1 +1 @@
-<div class="a-meta{{#if is_light}} a-meta--light{{/if}}{{#if color}} a-meta--{{color}}{{/if}}{{#if lowercase}} a-meta--lowercase{{/if}}">{{#if icon}}{{>@icon id=this.icon}} {{/if}}{{{text}}}</div>
+<div class="a-meta{{#if is_light}} a-meta--light{{/if}}{{#if color}} a-meta--{{color}}{{/if}}{{#if lowercase}} a-meta--lowercase{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}">{{#if icon}}{{>@icon id=this.icon}} {{/if}}{{{text}}}</div>

package/src/atoms/rating/_rating.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@include atom(rating) {
+	display: inline-flex;
+	flex-direction: row-reverse;
+
+	> label {
+		width: $icon-size-large * 1.5;
+		height: $icon-size-large * 1.5;
+		display: inline-flex;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: 36px 36px;
+		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300 255' style='enable-background:new 0 0 300 255;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%238E9297;%7D%0A%3C/style%3E%3Cpath class='st0' d='M266.9,36.7V0.4h-99v36.3h-35.8V0.4h-99v36.3h-33v72.8h33.2v36.3h32.9v36.3h33.2v36.6h32.9V255h35.8v-36.3H201 v-36.6h33v-36.3h32.9v-36.3h33.2V36.7H266.9z M257.5,85h-45.7V36.7H235v24.5h22.5V85z'/%3E%3C/svg%3E%0A");
+	}
+
+	@include e(radio) {
+		&:hover,
+		&:checked {
+			~ label {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 255'%3E%3Cpath d='M266.9 36.7V.4h-99v36.3h-35.8V.4h-99v36.3H.1v72.8h33.2v36.3h32.9v36.3h33.2v36.6h32.9V255h35.8v-36.3H201v-36.6h33v-36.3h32.9v-36.3h33.2V36.7h-33.2zM257.5 85h-45.7V36.7H235v24.5h22.5V85z' fill='%23ff4069'/%3E%3C/svg%3E");
+			}
+		}
+	}
+}

package/src/atoms/rating/rating.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	status: 'wip',
+
+	context: {
+		additional_classes: false
+	}
+}

package/src/atoms/rating/rating.hbs

@@ -0,0 +1,15 @@
+<form>
+	<fieldset class="a-rating{{#if additional_classes}} {{additional_classes}}{{/if}}">
+		<legend>Vad tyckte du om kursen?</legend>
+		<input type="radio" name="rating" value="5" class="a-rating__radio" id="rating-5">
+		<label for="rating-5" class="a-rating__label"><span class="u-visuallyhidden">betyg 5 av 5</span></label>
+		<input type="radio" name="rating" value="4" class="a-rating__radio" id="rating-4">
+		<label for="rating-4" class="a-rating__label "><span class="u-visuallyhidden">betyg 4 av 5</span></label>
+		<input type="radio" name="rating" value="3" class="a-rating__radio" id="rating-3">
+		<label for="rating-3" class="a-rating__label "><span class="u-visuallyhidden">betyg 3 av 5</span></label>
+		<input type="radio" name="rating" value="2" class="a-rating__radio" id="rating-2">
+		<label for="rating-2" class="a-rating__label "><span class="u-visuallyhidden">betyg 2 av 5</span></label>
+		<input type="radio" name="rating" value="1" class="a-rating__radio" id="rating-1">
+		<label for="rating-1" class="a-rating__label "><span class="u-visuallyhidden">betyg 1 av 5</span></label>
+	</fieldset>
+</form>

package/src/atoms/timeline/_timeline.scss

@@ -0,0 +1,77 @@
+@charset "UTF-8";
+
+@include atom(timeline) {
+	position: relative;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	font-family: $font-family-headings;
+	width: 50px;
+	flex-grow: 0;
+	flex-shrink: 0;
+
+	@include bp-up(lg) {
+		font-size: 170%;
+	}
+
+	&::after {
+		content: '';
+		display: flex;
+		background-color: $color-cyberspace;
+		height: 100%;
+		width: 3px;
+		order: 3;
+	}
+
+	@include m(first) {
+		&::before {
+			content: '';
+			display: flex;
+			border: 3px solid $color-cyberspace;
+			width: 50px;
+			height: 50px;
+			border-radius: 50%;
+			background-color: $color-snow;
+			order: 2;
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+	}
+}
+
+@include atom(timeline-item) {
+	position: relative !important;
+	overflow: visible !important;
+
+	@include card-shadow($color-cyberspace, 0.2);
+
+	&::before {
+		content: '';
+		display: flex;
+		height: 24px;
+		width: 24px;
+		border-radius: 50%;
+		background-color: $color-snow;
+		border: 3px solid $color-cyberspace;
+		position: absolute;
+		z-index: 1;
+		left: -48px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	&::after {
+		content: '';
+		display: flex;
+		position: absolute;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		left: -15px;
+		top: 50%;
+		transform: translateY(-50%);
+		border-width: 30px 15px 30px 0;
+		border-color: transparent $color-snow transparent transparent;
+
+	}
+}

package/src/components.js

@@ -20,3 +20,4 @@ import './organisms/podcast/podcast';
 import './assets/js/responsivePosition';
 import './assets/js/youtube';
 import './molecules/glider/glider';
+import './molecules/glider/glider-single';

package/src/configurations/_wordpress.scss

@@ -51,7 +51,7 @@ div.aligncenter {
 
 	figcaption {
 		@include plumber(
-			$font-size: 1.5,
+			$font-size: 1.7,
 			$line-height: 2,
 			$leading-bottom: 0
 		);

package/src/globals.scss

@@ -51,3 +51,4 @@
 @import 'utilities/clear';
 @import 'utilities/fill';
 @import 'utilities/indent';
+@import 'utilities/font-size';

package/src/molecules/card/_card.scss

@@ -178,6 +178,16 @@
 			@include e(bottom) {
 				margin-top: 0;
 			}
+
+			@include m(flipped) {
+				flex-direction: row-reverse;
+
+				@include e(media) {
+					border-top-right-radius: $border-radius;
+					border-top-left-radius: 0;
+					border-bottom-right-radius: $border-radius;
+				}
+			}
 		}
 	}
 

package/src/molecules/card/card.config.js

@@ -25,6 +25,7 @@ module.exports = {
 		icon: false,
 		button_color: false,
 		button_text: 'Button',
+		modifier: false
 	},
 	variants: [
 		{

package/src/molecules/card/card.hbs

@@ -1,4 +1,4 @@
-<{{#if top_level}}article{{else}}div{{/if}} class="m-card{{#if is_padded}} m-card--padded{{/if}}{{#if is_wide}} m-card--wide{{/if}}{{#if has_shadow}} m-card--shadow{{/if}}{{#if has_border}} m-card--bordered{{/if}}{{#if teaser}} m-card--teaser{{/if}}">
+<{{#if top_level}}article{{else}}div{{/if}} class="m-card{{#if is_padded}} m-card--padded{{/if}}{{#if is_wide}} m-card--wide{{/if}}{{#if has_shadow}} m-card--shadow{{/if}}{{#if has_border}} m-card--bordered{{/if}}{{#if teaser}} m-card--teaser{{/if}}{{#if modifier}} {{modifier}}{{/if}}">
 	{{#if has_icon_overlay}}
 		{{>@icon-overlay overlay_icon="play" additional_classes="m-card__image m-card__media"}}
 	{{/if}}

package/src/molecules/glider/_glider.scss

@@ -10,6 +10,12 @@
 	margin-bottom: rhythm(2);
 	padding-right: rhythm(8);
 	padding-left: rhythm(8);
+
+	@include m(single) {
+		padding-left: 0;
+		padding-right: 0;
+		margin-top: 0;
+	}
 }
 
 .glider {
@@ -57,6 +63,7 @@
 	margin-left: 1px;
 	padding: rhythm(2) 0;
 	user-select: none;
+	overflow: hidden;
 
 	img {
 		display: block;
@@ -91,6 +98,16 @@
 			}
 		}
 	}
+
+	@include m(single) {
+		margin-left: 0;
+		padding-left: $grid-gutter-width;
+		padding-right: $grid-gutter-width;
+
+		&::after {
+			display: none;
+		}
+	}
 }
 
 .glider-nav {
@@ -135,6 +152,21 @@
 	}
 }
 
+.glider-single-prev,
+.glider-single-next {
+	&.disabled {
+		display: none;
+
+		+ .glider-single-finish {
+			display: inline-flex;
+		}
+	}
+}
+
+.glider-single-finish {
+	display: none;
+}
+
 .glider-hide {
 	opacity: 0;
 }

package/src/molecules/glider/glider--single.hbs

@@ -0,0 +1,122 @@
+<div class="wrapper u-p-x-0">
+	<div class="glider-contain glider-contain--single">
+		<div class="glider{{#if single}} js-glider-single{{else}} js-glider{{/if}}">
+			<div class="glider-slide glider-slide--single">
+				<div class="row flex-column-reverse flex-lg-row">
+					<div class="grid-18 grid-lg-8">
+						<div class="u-m-b-2">
+							{{>@meta text="Introduktion"}}
+							<h1>Känn igen ett bluffmejl</h1>
+							<div class="a-meta a-meta--lowercase">
+								<svg class="icon">
+									<use xlink:href="#icon-read"></use>
+								</svg>
+								 3 min läsning
+							 </div>
+						</div>
+						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
+						<div id="slide-1-ImageContainerMobile"></div>
+						<nav>
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--jade-light glider-single-next js-glider-next" text="Starta kursen"}}
+						</nav>
+					</div>
+					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-1-ImageContainer">
+						<div class="wp-block-image" data-responsive="xs:slide-1-ImageContainerMobile,lg:slide-1-ImageContainer">
+							<figure class="size-large">
+								<img src="/assets/images/hero.jpg" alt="kursbild" class="u-border-radius">
+							</figure>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="glider-slide glider-slide--single">
+				<div class="row flex-column-reverse flex-lg-row">
+					<div class="grid-18 grid-lg-8">
+						<div class="u-m-b-2">
+							<div class="a-meta a-meta--wrap">
+								Känn igen ett bluffmejl - Steg 1 av 3
+							 </div>
+							<h2 class="alpha">Varför får man bluffmelj?</h2>
+						</div>
+						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
+						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
+						<div id="slide-2-ImageContainerMobile"></div>
+						<nav>
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt" }}
+						</nav>
+					</div>
+					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-2-ImageContainer">
+						<div class="wp-block-image" data-responsive="xs:slide-2-ImageContainerMobile,lg:slide-2-ImageContainer">
+							<figure class="size-large">
+								<figcaption class="u-m-b-1">Exempel på bluffmejl</figcaption>
+								<img src="/assets/images/bluffmejl.png" alt="kursbild" class="u-border-radius">
+							</figure>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="glider-slide glider-slide--single">
+				<div class="row flex-column-reverse flex-lg-row">
+					<div class="grid-18 grid-lg-8">
+						<div class="u-m-b-2">
+							<div class="a-meta a-meta--wrap">
+								Känn igen ett bluffmejl - Steg 2 av 3
+							 </div>
+							<h2 class="alpha">Hur känner man igen ett bluffmejl?</h2>
+						</div>
+						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
+						<div id="slide-3-ImageContainerMobile"></div>
+						<nav>
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="button" button_type="button" icon="arrow-forwards" additional_classes="a-button--peacock-light glider-single-next js-glider-next" text="Gå framåt"}}
+						</nav>
+					</div>
+					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-3-ImageContainer">
+						<div class="wp-block-image"  data-responsive="xs:slide-3-ImageContainerMobile,lg:slide-3-ImageContainer">
+							<figure>
+								<figcaption class="u-m-b-1">Se filmen om bluffmejl</figcaption>
+								<div class="m-icon-overlay m-card__image m-card__media" data-youtube="n8hPhZwV8a0">
+									<button type="button" class="m-icon-overlay__button" aria-label="play">
+										<svg class="icon m-icon-overlay__icon">
+										<use xlink:href="#icon-play"></use>
+									</svg>
+									</button>
+									<img src="https://i3.ytimg.com/vi/n8hPhZwV8a0/maxresdefault.jpg" alt="video"><iframe frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/n8hPhZwV8a0?playsinline=1&amp;rel=0&amp;widget_referrer=http%3A%2F%2Flocalhost%3A3000%2Fcomponents%2Fdetail%2Fcard--with-youtube-video&amp;enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A3000&amp;widgetid=1" id="widget2"></iframe>
+								</div>
+							</figure>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="glider-slide glider-slide--single">
+				<div class="row flex-column-reverse flex-lg-row">
+					<div class="grid-18 grid-lg-8">
+						<div class="u-m-b-2">
+							<div class="a-meta a-meta--wrap">
+								Känn igen ett bluffmejl - Steg 3 av 3
+							 </div>
+							<h2 class="alpha">Bra, nu kan du känna igen ett bluffmejl!</h2>
+						</div>
+						<p>Bluffmejl ser oftast ut som vanliga mejl. Avsändaren vill att du ska klicka på länkar och lämna privat information utan att tänka. Du kan uppmanas uppge ditt lösenord, dina kontokortsuppgifter eller annan personlig information.</p>
+						<div id="slide-4-ImageContainerMobile"></div>
+
+						{{> @rating additional_classes='u-m-b-2'}}
+						<nav>
+							{{> @button el="button" button_type="button" icon="arrow-backwards" additional_classes="a-button--icon-left a-button--transparent a-button--transparent--small-icon glider-single-prev js-glider-prev" text="Gå bakåt"}}
+							{{> @button el="a" url="#" additional_classes="a-button--jade-light" icon="check" text="Avsluta kursen"}}
+						</nav>
+					</div>
+					<div class="grid-18 grid-lg-9 offset-lg-1 u-hide-md" id="slide-4-ImageContainer">
+						<div class="wp-block-image" data-responsive="xs:slide-4-ImageContainerMobile,lg:slide-4-ImageContainer">
+							<figure class="size-large">
+								<img src="/assets/images/ALX_0876.jpg" alt="kursbild" class="u-border-radius">
+							</figure>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</div>

package/src/molecules/glider/glider-single.js

@@ -0,0 +1,40 @@
+import Glider from 'glider-js';
+
+const gliderElementSingle = document.querySelector('.js-glider-single');
+
+if (gliderElementSingle) {
+	const GliderSingle = new Glider(gliderElementSingle, {
+		scrollLock: true,
+		slidesToShow: 1,
+		slidesToScroll: 1,
+	});
+
+	const nextBtns = document.querySelectorAll('.js-glider-next');
+	const prevBtns = document.querySelectorAll('.js-glider-prev');
+	let slideIndex = 0;
+	const scrollTop = () => {
+		gliderElementSingle.scrollIntoView();
+	};
+
+	if (nextBtns) {
+		[].forEach.call(nextBtns, (nextBtn) => {
+			nextBtn.addEventListener('click', () => {
+				slideIndex += 1;
+				GliderSingle.scrollItem(slideIndex, true);
+				scrollTop();
+			});
+		});
+	}
+
+	if (prevBtns) {
+		[].forEach.call(prevBtns, (prevBtn) => {
+			prevBtn.addEventListener('click', () => {
+				slideIndex -= 1;
+				GliderSingle.scrollItem(slideIndex, true);
+				scrollTop();
+			});
+		});
+	}
+
+	module.exports = GliderSingle;
+}

package/src/molecules/glider/glider.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-	status: 'wip',
+	status: 'ready',
 
 	context: {
 		dots: false,
@@ -10,6 +10,13 @@ module.exports = {
 			context: {
 				dots: true
 			}
+		},
+		{
+			name: 'Single',
+			status: 'wip',
+			context: {
+				single: true
+			}
 		}
 	]
 }

package/src/organisms/hero/_hero.scss

@@ -186,6 +186,15 @@
 			}
 		}
 
+		&.alignfull {
+			@include e(caption) {
+				.wrapper {
+					padding-right: rhythm(2);
+					padding-left: rhythm(2);
+				}
+			}
+		}
+
 		@include e(link) {
 			color: $color-cyberspace;
 		}

package/src/pages/internetguider/internetguider.hbs

@@ -47,10 +47,10 @@
 							</div>
 							<div class="row justify-content-between u-m-b-4 u-m-t-2">
 								<div class="grid-auto">
-									{{> @button href="#" text="Föregående kapitel" modifiers="lemon a-button--icon-left" icon="arrow-backwards"}}
+									{{> @button url="#" text="Föregående kapitel" modifiers="lemon a-button--icon-left" icon="arrow-backwards"}}
 								</div>
 								<div class="grid-auto">
-									{{> @button href="#" text="Nästa kapitel" modifiers="lemon" icon="arrow-forwards"}}
+									{{> @button url="#" text="Nästa kapitel" modifiers="lemon" icon="arrow-forwards"}}
 								</div>
 							</div>
 						</main>

package/src/pages/timeline/timeline.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	status: 'prototype',
+
+	context: {
+		alt: 'Hands typing on laptop',
+		img_url: '/assets/images/ALX_0876.jpg',
+		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
+		url: 'http://www.google.se',
+		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
+		is_padded: true,
+		is_wide: true,
+		has_shadow: false,
+		has_button: false,
+		read_time: true,
+		has_border: false,
+		has_image: true,
+		has_radius: true
+	}
+}

package/src/pages/timeline/timeline.hbs

@@ -0,0 +1,24 @@
+<div class="wrapper">
+	<div class="row align-items-stretch">
+		<div class="a-timeline a-timeline--first">
+			<span>1960</span>
+		</div>
+	</div>
+	<div class="row align-items-stretch">
+		<div class="a-timeline"></div>
+		<div class="grid-15 grid-sm-16 grid-lg-17 offset-xs-1 u-m-b-2">
+
+			{{> @card modifier="m-card--wide--flipped u-m-b-8 a-timeline-item" title="1963 Här kläcks idén om ett ”intergalaktiskt nätverk”" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+
+			{{> @card modifier="u-m-b-8 a-timeline-item"  title="1969 Starten på internet heter Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+
+			{{> @card modifier="m-card--wide--flipped u-m-b-8 a-timeline-item"  title="1973 Svensk uppfinning byggs in i Arpanet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+
+			{{> @card modifier="u-m-b-8 a-timeline-item"  title="1982 Datavidion är ett ”text-tv-indenter”" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+
+			{{> @card modifier="m-card--wide--flipped u-m-b-8 a-timeline-item"  title="1986 Björn Eriksen kniper toppdomänen – så blir Sverige .se på internet" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+
+			{{> @card modifier="u-m-b-8 a-timeline-item"  title="1989 World wide web skapas – nu kan internet bli en publiksuccé" excerpt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum."}}
+		</div>
+	</div>
+</div>

package/src/utilities/_font-size.scss

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+.u-font-size-small {
+	font-size: $size-small !important;
+}
+
+.u-font-size-medium {
+	font-size: $size-medium !important;
+}
+
+.u-font-size-medium-plus {
+	font-size: $size-medium-plus !important;
+}
+
+.u-font-size-base {
+	font-size: $size-base !important;
+}