<div class="o-section background-jade-light alignfull">
    <div class="wrapper iis-o-section__content">
        <div class="grid-18">
            <div class="article">
                <div class="article__content">
                    <div class="alignfull">
                        <div class="wrapper">
                            <div class="grid-18 grid-lg-12 u-m-offset-1">
                                <strong class="a-meta">hjärtefråga</strong>
                                <h1 class="supersize">Testsida för wordpress gutenberg blocks</h1>
                                <p>Visste du att internet är skitstort?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<div class="article u-m-t-0 u-p-t-2">
    <div class="wrapper">
        <div class="article__content article__content--full-width">
            <h1>Testsida för wordpress gutenberg blocks</h1>
            <p class="wp-block-iis-preamble preamble">Så gott som alla svenskar använder internet och digitala tjänster idag. Både unga och äldre, de som gillar teknik och de som inte alls gör det. Alla behöver kunna hantera digitala tjänster, förstå hur de fungerar och hur de påverkar samhället.</p>
            <div class="wp-block-image">
                <figure class="alignfull size-large">
                    <img alt="lemon" src="/assets/images/ALX_0876.jpg">
                </figure>
            </div>

            <div class="m-card m-card--padded m-card--wide alignwide">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">

                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="m-card__heading-link__heading">Gymnasieskolor med hög bandbredd har bättre skolresultat</h2>
                    </a>
                    <p class="m-card__text">Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.</p>

                    <div class="m-card__bottom">
                    </div>
                </div>
            </div>

            <div class="wp-block-image">
                <figure class="alignright size-medium">
                    <img alt="lemon" src="/assets/images/ALX_0876.jpg">
                </figure>
            </div>
            <p>Internetstiftelsen har som ett av sina mål att bidra till kunniga och medvetna internetanvändare. Alla som köper ett domännamn som slutar på .se eller .nu är med och bidrar till det.</p>

            <p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med inriktning på internet. Läs mer om vår verksamhet här.</p>

            <div class="wp-block-iis-grid">
                <div class="row">
                    <div class="grid-18 grid-md-12 u-m-b-4">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                            <div class="m-card__content">
                                <a href="http://www.google.se" class="m-card__link">
                                    <h2 class="">
                                        Gymnasieskolor med hög bandbredd har bättre skolresultat
                                    </h2>
                                </a>

                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-md-6 u-m-b-4">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                            <div class="m-card__content">
                                <a href="http://www.google.se" class="m-card__link">
                                    <h2 class="">
                                        Gymnasieskolor med hög bandbredd har bättre skolresultat
                                    </h2>
                                </a>

                            </div>
                        </div>
                        <p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation.</p>
                    </div>
                </div>
            </div>

            <p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med inriktning på internet. Läs mer om vår verksamhet här.</p>
            <style media="screen">
                :root {
                    --m-info-box-border-color: #c27fec;
                }
            </style>
            <div class="m-info-box wp-block-iis-info">
                Sit sunt id cillum consequat sint ut voluptate eu consequat occaecat est eiusmod anim anim.
            </div>
            <section class="alignfull o-section background-ocean-light u-m-b-4">
                <div class="wrapper">
                    <div class="grid-18 wp-blocks">
                        <p class="wp-block-paragraph">Artiklarna och filmerna på den här sajten är framtagna av oss på Internetstiftelsen tillsammans med produktionsbyrån KIT Creative Studio. Syftet är att dela med oss av den kunskap vi har om internet, och sprida den på sociala medier, en bit i taget.</p>
                    </div>
                </div>

            </section>

            <div class="m-card m-card--padded alignright">
                <img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
                <div class="m-card__content">
                    <a href="http://www.google.se" class="m-card__link">
                        <h2 class="">
                            Gymnasieskolor med hög bandbredd har bättre skolresultat
                        </h2>
                    </a>
                </div>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis hendrerit ante tincidunt vestibulum. Nullam nec enim congue mauris accumsan pellentesque. Praesent ut tincidunt lacus. Proin tincidunt nunc et ligula mollis, at auctor quam consectetur. Vivamus interdum est in felis rhoncus, in sodales metus dapibus. Suspendisse faucibus et arcu a gravida. Aliquam vehicula sem est, quis accumsan leo ultricies sed. Quisque aliquet pharetra sapien nec fermentum.</p>

            <p>Nullam et sem id est feugiat dignissim scelerisque in leo. Pellentesque dapibus sem quis pellentesque consectetur. Donec nec quam venenatis, congue sapien non, mattis metus. Nunc auctor lectus turpis. Morbi vitae mi mollis, vestibulum dolor id, molestie nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc condimentum, tortor ut interdum pulvinar, lacus orci tincidunt nibh, id venenatis nisi lorem quis odio. Integer purus lorem, imperdiet id pretium vel, mattis vel turpis. Fusce pharetra bibendum magna. Duis pellentesque risus et lectus condimentum faucibus. Sed luctus ac mauris consequat ullamcorper.</p>

            <p>Mauris felis risus, tempus eget ornare at, scelerisque non ipsum. Nulla eu interdum ligula. Maecenas volutpat efficitur accumsan. Mauris tincidunt eleifend molestie. Nam metus dolor, semper vitae massa posuere, faucibus pulvinar dui. Sed maximus nisi convallis orci rhoncus, id tempus diam egestas. Donec libero leo, bibendum nec faucibus et, feugiat at eros. Proin porttitor purus ac volutpat imperdiet. Ut suscipit metus ornare dolor consectetur tincidunt. Morbi vestibulum, orci in cursus aliquam, velit nunc tincidunt enim, vitae semper nibh leo nec sem.</p>

            <div class="wp-block-image">
                <img src="/assets/images/ALX_0876.jpg" alt="">
            </div>
        </div>
    </div>
</div>
<div class="o-section background-jade-light alignfull">
	<div class="wrapper iis-o-section__content">
		<div class="grid-18">
			<div class="article">
				<div class="article__content">
					<div class="alignfull">
						<div class="wrapper">
							<div class="grid-18 grid-lg-12 u-m-offset-1">
								<strong class="a-meta">hjärtefråga</strong>
									<h1 class="supersize">Testsida för wordpress gutenberg blocks</h1>
									<p>Visste du att internet är skitstort?</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="article u-m-t-0 u-p-t-2">
	<div class="wrapper">
		<div class="article__content article__content--full-width">
			<h1>Testsida för wordpress gutenberg blocks</h1>
			<p class="wp-block-iis-preamble preamble">Så gott som alla svenskar använder internet och digitala tjänster idag. Både unga och äldre, de som gillar teknik och de som inte alls gör det. Alla behöver kunna hantera digitala tjänster, förstå hur de fungerar och hur de påverkar samhället.</p>
			<div class="wp-block-image">
				<figure class="alignfull size-large">
					<img alt="lemon" src="/assets/images/ALX_0876.jpg">
				</figure>
			</div>

			<div class="m-card m-card--padded m-card--wide alignwide">
				<img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">

				<div class="m-card__content">
					<a href="http://www.google.se" class="m-card__link"><h2 class="m-card__heading-link__heading">Gymnasieskolor med hög bandbredd har bättre skolresultat</h2></a>
					<p class="m-card__text">Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.</p>

					<div class="m-card__bottom">
					</div>
				</div>
			</div>

			<div class="wp-block-image">
				<figure class="alignright size-medium">
					<img alt="lemon" src="/assets/images/ALX_0876.jpg">
				</figure>
			</div>
			<p>Internetstiftelsen har som ett av sina mål att bidra till kunniga och medvetna internetanvändare. Alla som köper ett domännamn som slutar på .se eller .nu är med och bidrar till det.</p>

			<p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med inriktning på internet. Läs mer om vår verksamhet här.</p>

			<div class="wp-block-iis-grid">
				<div class="row">
					<div class="grid-18 grid-md-12 u-m-b-4">
						{{> @card}}
					</div>
					<div class="grid-18 grid-md-6 u-m-b-4">
						{{> @card}}
						<p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation.</p>
					</div>
				</div>
			</div>

			<p>Internetstiftelsen är en oberoende, affärsdriven och allmännyttig organisation. Vi verkar för ett internet som bidrar positivt till människan och samhället. Vi ansvarar för internets svenska toppdomän .se och sköter drift och administration av toppdomänen .nu. Intäkterna från affärsverksamheten finansierar en rad satsningar i syfte att möjliggöra att människor kan nyttja internet på bästa sätt, och stimulera kunskapsdelning och innovation med inriktning på internet. Läs mer om vår verksamhet här.</p>
			{{>@info-box text="Sit sunt id cillum consequat sint ut voluptate eu consequat occaecat est eiusmod anim anim." additional_classes="wp-block-iis-info"}}
			<section class="alignfull o-section background-ocean-light u-m-b-4">
			<div class="wrapper">
				<div class="grid-18 wp-blocks">
				<p class="wp-block-paragraph">Artiklarna och filmerna på den här sajten är framtagna av oss på Internetstiftelsen tillsammans med produktionsbyrån KIT Creative Studio. Syftet är att dela med oss av den kunskap vi har om internet, och sprida den på sociala medier, en bit i taget.</p>
				</div>
			</div>

			</section>

			<div class="m-card m-card--padded alignright">
				<img src="/assets/images/ALX_0876.jpg" class="m-card__image m-card__media" alt="Hands typing on laptop">
				<div class="m-card__content">
				<a href="http://www.google.se" class="m-card__link">
					<h2 class="">
						Gymnasieskolor med hög bandbredd har bättre skolresultat
					</h2>
				</a>
				</div>
			</div>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis hendrerit ante tincidunt vestibulum. Nullam nec enim congue mauris accumsan pellentesque. Praesent ut tincidunt lacus. Proin tincidunt nunc et ligula mollis, at auctor quam consectetur. Vivamus interdum est in felis rhoncus, in sodales metus dapibus. Suspendisse faucibus et arcu a gravida. Aliquam vehicula sem est, quis accumsan leo ultricies sed. Quisque aliquet pharetra sapien nec fermentum.</p>

			<p>Nullam et sem id est feugiat dignissim scelerisque in leo. Pellentesque dapibus sem quis pellentesque consectetur. Donec nec quam venenatis, congue sapien non, mattis metus. Nunc auctor lectus turpis. Morbi vitae mi mollis, vestibulum dolor id, molestie nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc condimentum, tortor ut interdum pulvinar, lacus orci tincidunt nibh, id venenatis nisi lorem quis odio. Integer purus lorem, imperdiet id pretium vel, mattis vel turpis. Fusce pharetra bibendum magna. Duis pellentesque risus et lectus condimentum faucibus. Sed luctus ac mauris consequat ullamcorper.</p>

			<p>Mauris felis risus, tempus eget ornare at, scelerisque non ipsum. Nulla eu interdum ligula. Maecenas volutpat efficitur accumsan. Mauris tincidunt eleifend molestie. Nam metus dolor, semper vitae massa posuere, faucibus pulvinar dui. Sed maximus nisi convallis orci rhoncus, id tempus diam egestas. Donec libero leo, bibendum nec faucibus et, feugiat at eros. Proin porttitor purus ac volutpat imperdiet. Ut suscipit metus ornare dolor consectetur tincidunt. Morbi vestibulum, orci in cursus aliquam, velit nunc tincidunt enim, vitae semper nibh leo nec sem.</p>

			<div class="wp-block-image">
				<img src="/assets/images/ALX_0876.jpg" alt="">
			</div>
		</div>
	</div>
</div>
{
  "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": false,
  "has_shadow": false,
  "has_button": false,
  "read_time": true,
  "has_border": false,
  "has_image": true,
  "has_radius": true
}

Wordpress gutenberg blocks

This page is for testing the markup in our Wordpress gutenberg blocks in the styleguide.

New blocks will be added as they are developed