<article class="article article--default" role="article">
    <h1 class="article__headline">Page heading</h1>

    <div class="article__lead">
        <p>
            <b class="article__category">Category</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
    </div>

    <div class="article__body">
        <h2>Heading 2 Lorem Ipsum Dolor Sit Amet Consectetur</h2>
        <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the
            syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
        <h3>Heading 3 Lorem Ipsum Dolor Sit Amet Consectetur</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate.</p>
        <h4>Heading 4 Lorem Ipsum Dolor Sit Amet Consectetur</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate.</p>
        <h5>Heading 5 Lorem Ipsum Dolor Sit Amet Consectetur</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate.</p>
        <h6>Heading 6 Lorem Ipsum Dolor Sit Amet Consectetur</h6>
        <p>Lorem ipsum dolor sit amet, <a href="/">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate.</p>

        <hr>

        <h2>Blockquote</h2>
        <blockquote>
            <p>The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
            <footer><cite>Tim Berners-Lee</cite></footer>
        </blockquote>

        <hr>

        <h2>Links</h2>
        <p>An <a href="?=1481112567474" class="prototype-random">unvisited link</a> and a <a href="">visited link</a>.</p>
        <p>An <a href="?=1481112567474" class="prototype-random" target="_blank">external link</a> and another <a href="/" target="_blank" aria-label="opens in a new window">external link</a>.</p>
        <p>A <a href="temp/test.pdf">link to a PDF</a>.</p>

        <script>
            var elements = document.querySelectorAll('.prototype-random');
            Array.prototype.forEach.call(elements, function(el) {
                el.setAttribute('href', '?=' + (new Date().getTime()));
            });
        </script>

        <hr>

        <h2>Ordered list</h2>
        <ol>
            <li>Donec cursus justo sit amet viverra interdum</li>
            <li>
                Praesent aliquam posuere efficitur
                <ol>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Ut consequat auctor lorem</li>
                </ol>
            </li>
            <li>
                Praesent aliquam posuere efficitur
                <ul>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Nulla vel tortor vel mi rutrum elementum vitae vitae erat</li>
                </ul>
            </li>
            <li>Proin vel nulla vel sapien ornare feugiat</li>
        </ol>

        <hr>

        <h2>Unordered list</h2>
        <ul>
            <li>Proin gravida varius dui non elementum</li>
            <li>
                Aliquam mollis aliquet quam, vitae aliquet elit molestie eget
                <ul>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Nulla vel tortor vel mi rutrum elementum vitae vitae erat</li>
                </ul>
            </li>
            <li>Suspendisse placerat condimentum euismod</li>
        </ul>

        <hr>

        <h2>Inline elements</h2>

        <p><a href="#">This is a text link</a>.</p>
        <p><strong>Strong is used to indicate strong importance.</strong></p>
        <p><em>This text has added emphasis.</em></p>
        <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
        <p>The <i>i element</i> is text that is offset from the normal text.</p>
        <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
        <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
        <p><s>This text has a strikethrough</s>.</p>
        <p>Superscript<sup>®</sup>.</p>
        <p>Subscript for things like H<sub>2</sub>O.</p>
        <p><small>This small text is small for for fine print, etc.</small></p>
        <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
        <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
        <p><cite>This is a citation.</cite>
        </p>
        <p>The <dfn>dfn element</dfn> indicates a definition.</p>
        <p>The <mark>mark element</mark> indicates a highlight.</p>
        <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
        <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
    </div>

</article>
<article class="article article--{{ modifier }}" role="article">
  <h1 class="article__headline">{{ title }}</h1>

  {% if pubdate %}
  <div class="article__byline">
    <time class="article__date" datetime="{{ pubdate }}">{{ pubdate }}</time>
  </div>
  {% endif %}

  {% if lead %}
  <div class="article__lead">
    <p>
    {% if category %}<b class="article__category">{{ category }}</b>{% endif %}
    {{ lead }}</p>
  </div>
  {% endif %}

  <div class="article__body">
    <h2>Heading 2 Lorem Ipsum Dolor Sit Amet Consectetur</h2>
    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
    <h3>Heading 3 Lorem Ipsum Dolor Sit Amet Consectetur</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
    <h4>Heading 4 Lorem Ipsum Dolor Sit Amet Consectetur</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
    <h5>Heading 5 Lorem Ipsum Dolor Sit Amet Consectetur</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
    <h6>Heading 6 Lorem Ipsum Dolor Sit Amet Consectetur</h6>
    <p>Lorem ipsum dolor sit amet, <a href="/">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>

    <hr>

    <h2>Blockquote</h2>
    <blockquote>
    <p>The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
    <footer><cite>Tim Berners-Lee</cite></footer>
    </blockquote>

    <hr>

    <h2>Links</h2>
    <p>An <a href="?=1481112567474" class="prototype-random">unvisited link</a> and a <a href="">visited link</a>.</p>
    <p>An <a href="?=1481112567474" class="prototype-random" target="_blank">external link</a> and another <a href="/" target="_blank" aria-label="opens in a new window">external link</a>.</p>
    <p>A <a href="temp/test.pdf">link to a PDF</a>.</p>

    <script>
    var elements = document.querySelectorAll('.prototype-random');
    Array.prototype.forEach.call(elements, function(el) {
    el.setAttribute('href', '?=' + (new Date().getTime()));
    });
    </script>

    <hr>

    <h2>Ordered list</h2>
    <ol>
    <li>Donec cursus justo sit amet viverra interdum</li>
    <li>
      Praesent aliquam posuere efficitur
      <ol>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Ut consequat auctor lorem</li>
      </ol>
    </li>
    <li>
      Praesent aliquam posuere efficitur
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Nulla vel tortor vel mi rutrum elementum vitae vitae erat</li>
      </ul>
    </li>
    <li>Proin vel nulla vel sapien ornare feugiat</li>
    </ol>

    <hr>

    <h2>Unordered list</h2>
    <ul>
    <li>Proin gravida varius dui non elementum</li>
    <li>
      Aliquam mollis aliquet quam, vitae aliquet elit molestie eget
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Nulla vel tortor vel mi rutrum elementum vitae vitae erat</li>
      </ul>
    </li>
    <li>Suspendisse placerat condimentum euismod</li>
    </ul>

    <hr>

    <h2>Inline elements</h2>

    <p><a href="#">This is a text link</a>.</p>
    <p><strong>Strong is used to indicate strong importance.</strong></p>
    <p><em>This text has added emphasis.</em></p>
    <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
    <p>The <i>i element</i> is text that is offset from the normal text.</p>
    <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
    <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
    <p><s>This text has a strikethrough</s>.</p>
    <p>Superscript<sup>®</sup>.</p>
    <p>Subscript for things like H<sub>2</sub>O.</p>
    <p><small>This small text is small for for fine print, etc.</small></p>
    <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
    <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
    <p><cite>This is a citation.</cite>
    </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
    <p>The <mark>mark element</mark> indicates a highlight.</p>
    <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
    <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
  </div>

</article>
{
  "modifier": "default",
  "title": "Page heading",
  "lead": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
  "body": "<p>– Vi kan aldrig bevisa orsak och verkan i en fall- och kontrollstudie, men vi ser ett klart samband, säger Björn Klinge, professor i parodontologi vid Odontologiska fakulteten, Malmö högskola.</p><p>Björn Klinge var odontologiskt ansvarig för studien som omfattade 800 patienter yngre än 72 år (81 procent män) från 17 svenska sjukhus och leddes av Lars Rydén, professor i kardiologi vid Karolinska institutet.</p><p>Deltagarna hade behandlats för hjärtinfarkt på respektive sjukhus där de sedan undersöktes på sjukhusets tandvårdsklinik. Ungefär 40 procent av patienterna led av måttlig till svår parodontit (tandlossning). Undersökningen vägde in socioekonomiska faktorer och om patienten var rökare eller led av sjukdomar som diabetes.</p><h2>Ingen annan förklaring</h2><p>Varje patient jämfördes med en frisk person av samma kön och ålder som också genomgick en odontologisk undersökning.<br>– När vi hade eliminerat riskfaktorer och så mycket osäkerhesom möjligt återstod 28 procent av patientgruppen med parodontit där hjärtinfarkten inte kunde förklaras av någonting annat, säger Björn Klinge.</p><p>Det finns alltså anledning för tandläkare att rekommendera patienter med svår tandlossning att undersöka sitt hjärt- och kärlsystem. Björn Klinge ser framförallt två kopplingar mellan tandlossning och hjärtinfarkt:<br>– Vi vet att det vid infektioner läcker ut bakterier i blodbanan som kan fastna i blodkärlets väggar och kan orsaka åderförkalkning. När inflammatoriska ämnen läcker ut i blodet kan dessa också fastna i artärernas innerväggar och orsaka blodkärlsförändringar. Något av detta kan vara det som påverkar infarkten.</p><h2>Munnen är också del av kroppen</h2><p>På Odontologiska fakulteten vid Malmö högskola utvecklas metoder för att spåra signalämnen i saliven som gör det lättare att diagnostisera patienter som löper risk att få hjärtinfarkt.&nbsp; Björn Klinge ser en ökande medvetenhet om att ”munnen också är en del av kroppen” och tycker gränsdragningen inom vården är bekymmersam.</p><p>– Får du en infektion i tån går du till doktorn och betalar patientavgift. Får du infektion i munnen blir du omhändertagen av tandvården och få betala betydligt mer. Ekonomin kan alltså sätta spärrar för en god oral hälsa. Det handlar om jämlik hälsa och om värdet av förebyggande insatser, säger Björn Klinge.</p>",
  "articleMeta": {
    "name": "Namn Namnsson",
    "date": "2017-01-05 09:39:15",
    "email": "namn.namnsson@vgregion.se"
  },
  "category": "Category"
}

There are no notes for this item.