Styleguide 0.30.11

32 - Columnist

A more designed article preview, columnist-preview. Primarily used for 'Meninger'. The columnist-preview folds into our Grid where small-n, medium-n and large-n sets the width. This preview is ment to be used for Dabladets' commentators.

<article class="preview columnist-wrapper small-12 medium-12 column">
    <a href="#" title="Selvforsvarsministeren">
        <div class="columnist-article" style="background-image: url('http://gfx.dagbladet.no/labrador/415/415466/41546614/jpg/active/978x.jpg')">
            <div class="intro">
                    <img class="columnist-photo z-shadow-3" src="http://www.dagbladet.no/meninger/assets/images/bylines/abl.png" alt="Anne Marte Blindheim">
                <div class="columnist">
                    <span class="columnist-author"> Anne Marte Blindheim </span>
                </div>
                <h1 itemprop="headline" class="headline columnist-title">
                    Selvforsvarsministeren
                </h1>
                <p itemprop="description" class="standfirst hide-for-small">
                    Norske barn leker i helsefarlig luft. Men myndighetene tar seg god tid med å løse situasjonen.
                </p>
            </div>
        </div>
    </a>
</article>

32.2 - Columnist-list

Dagbladets kommentatorer
<section class="row">
    <div class="small-12 medium-12 large-12 column columnist-list">
        <h5 class="section-title teal"><span>Dagbladets kommentatorer</span></h5>
        <ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-6">
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/msi.png" alt="Marie Simonsen">
                    <div itemprop="name">Marie Simonsen</div>
                    <div itemprop="jobTitle">Kommentator</div>
                    <a href="/tag/Marie Simonsen" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/joe.png" alt="John Olav Egeland">
                    <div itemprop="name">John Olav Egeland</div>
                    <div itemprop="jobTitle">Redaktør og politisk kommentator</div>
                    <a href="/tag/John Olav Egeland" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/ibe.png" alt="Inger Bentzrud">
                    <div itemprop="name">Inger Bentzrud</div>
                    <div itemprop="jobTitle">Kommentator</div>
                    <a href="/tag/Inger Bentzrud" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/mau.png" alt="Martine Aurdal">
                    <div itemprop="name">Martine Aurdal</div>
                    <div itemprop="jobTitle">Debattansvarlig og kommentator</div>
                    <a href="/tag/Martine Aurdal" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/ger.png" alt="Geir Ramnefjell">
                    <div itemprop="name">Geir Ramnefjell</div>
                    <div itemprop="jobTitle">Politisk redaktør</div>
                    <a href="/tag/Geir Ramnefjell" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/shv.png" alt="Sigrid Hvidsten">
                    <div itemprop="name">Sigrid Hvidsten</div>
                    <div itemprop="jobTitle">Kulturredaktør</div>
                    <a href="/tag/Sigrid Hvidsten" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/gfo.png" alt="Gudleiv Forr">
                    <div itemprop="name">Gudleiv Forr</div>
                    <div itemprop="jobTitle">Kommentator</div>
                    <a href="/tag/Gudleiv Forr" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/omr.png" alt="Ola Magnussen Rydje">
                    <div itemprop="name">Ola Magnussen Rydje</div>
                    <div itemprop="jobTitle">Kommentator i Dagbladet</div>
                    <a href="/tag/Ola Magnussen Rydje" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/mst.png" alt="Morten Strand">
                    <div itemprop="name">Morten Strand</div>
                    <div itemprop="jobTitle">Journalist i samfunnsavdelingen, kommentator</div>
                    <a href="/tag/Morten Strand" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/eha.png" alt="Einar Hagvaag">
                    <div itemprop="name">Einar Hagvaag</div>
                    <div itemprop="jobTitle">Kommentator i lederavdelingen</div>
                    <a href="/tag/Einar Hagvaag" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/fwa.png" alt="Fredrik Wandrup">
                    <div itemprop="name">Fredrik Wandrup</div>
                    <div itemprop="jobTitle">Litteraturanmelder og kommentator</div>
                    <a href="/tag/Fredrik Wandrup" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/tst.png" alt="Tom Stalsberg">
                    <div itemprop="name">Tom Stalsberg</div>
                    <div itemprop="jobTitle">Journalist og kommentator</div>
                    <a href="/tag/Tom Stalsberg" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/ckr.png" alt="Cornelia Kristiansen">
                    <div itemprop="name">Cornelia Kristiansen</div>
                    <div itemprop="jobTitle">Sosiale medier-ansvarlig</div>
                    <a href="/tag/Cornelia Kristiansen" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/abl.png" alt="Anne Marte Blindheim">
                    <div itemprop="name">Anne Marte Blindheim</div>
                    <div itemprop="jobTitle">Leder i politisk nyhetsavdeling</div>
                    <a href="/tag/Anne Marte Blindheim" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/imh.png" alt="Inger Merete Hobbelstad">
                    <div itemprop="name">Inger Merete Hobbelstad</div>
                    <div itemprop="jobTitle">Journalist, anmelder og kommentator i lederavdelingen</div>
                    <a href="/tag/Inger Merete Hobbelstad" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/jes.png" alt="Jan-Erik Smilden">
                    <div itemprop="name">Jan-Erik Smilden</div>
                    <div itemprop="jobTitle">Kommentator</div>
                    <a href="/tag/Jan-Erik Smilden" class="">Vis alle saker</a>
                </li>
                <li itemscope itemprop="Person" itemtype="http://schema.org/Person">
                    <img itemprop="image" src="//styleguide.dagbladet.no/assets/bylines/mlk.png" alt="Marie L. Kleve">
                    <div itemprop="name">Marie L. Kleve</div>
                    <div itemprop="jobTitle">Litteraturansvarlig og kommentator</div>
                    <a href="/tag/Marie L. Kleve" class="">Vis alle saker</a>
                </li>
        </ul>
    </div>
</section>