Typografie

Heading 1

font-size: 4.13em (66px) | font-weight: 400 | font-family: Rois

Heading 2

font-size: 3.2em (51px) | font-weight: 400 | font-family: Rois

Heading 3

font-size: 2.67em (42px) | font-weight: 400 | font-family: Basis-Grotesque-Pro

Heading 4

font-size: 2.13em (34px) | font-weight: 400 | font-family: Basis-Grotesque-Pro
Heading 5
font-size: 1.467em (24px) | font-weight: 600 | font-family: Basis-Grotesque-Pro
Heading 6
font-size: 1.2em (19px) | font-weight: 600 | font-family: Basis-Grotesque-Pro

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Paragraph

font-size: 1.2em (19px) | font-weight: 300 | font-family: Basis-Grotesque-Pro

Het nieuws goed benutten? Bespaar tijd met een compleet content sharing-platform, verrijk je website met een op je branche afgestemde nieuwsfeed of analyseer en monitor je campagnes en publicaties.


<p>Het nieuws goed benutten? Bespaar tijd!</p>

Buttons - Links

Button solid

Available colors: blue, white, black Button Button Button <a href="javascript:void()" class="btn btn-solid--COLOR">Button</a>

Page link

Meer over de ANP fotowinkel <a href="javascript:void()" class="btn-icon streamer-block__button"> <span class="icon-solid--blue icon--small"> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-322.000000, -576.000000)" fill="#0039D8"><polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"></polygon></g></g></svg> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-322.000000, -576.000000)" fill="#0039D8"><polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"></polygon></g></g></svg> </span> <span class="btn-icon__text">Meer over de ANP fotowinkel</span> </a>

Button ghost

Available colors: blue, black Button <a href="javascript:void()" class="btn btn-ghost--COLOR">Button</a>

Forms

Forms - base

Form fields

Voor welke rubriek lever je een agendapunt? (meerdere keuzes mogelijk)

Details van jouw agendapunt

Bedankt, het formulier is succesvol verzonden



<div class="block form-block block--small"> <form class="form-block__form" id="custom-form" action="/form/send" method="post" data-key=""> <input type="hidden" name="_token" value=""> <div class="form-block__fields"> <input type="hidden" name="block_id" value="13556"> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-van-welke-instelling-organisatie-bedrijf-ben-je">Van welke instelling / organisatie/ bedrijf/ ben je?</label> <input type="text" name="van-welke-instelling-organisatie-bedrijf-ben-je" id="form-block-van-welke-instelling-organisatie-bedrijf-ben-je" value=""> </div> <p class="form-block__description">Voor welke rubriek lever je een agendapunt? (meerdere keuzes mogelijk) </p> <div class="form-block__checkbox"> <input type="checkbox" name="binnenland" class="form__option" value="1" id="form-block-binnenland"> <label for="form-block-binnenland">Binnenland</label> </div> <div class="form-block__checkbox"> <input type="checkbox" name="buitenland" class="form__option" value="1" id="form-block-buitenland"> <label for="form-block-buitenland">Buitenland</label> </div> <h6 class="form-block__heading">Details van jouw agendapunt</h6> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-wanneer-datum-verplicht">Wanneer - Datum (verplicht)</label> <input type="text" name="wanneer-datum-verplicht" id="form-block-wanneer-datum-verplicht" value="" required=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-wat-korte-uitleg-maximaal-100-woorden">Wat - Korte uitleg (maximaal 100 woorden)</label> <input type="text" name="wat-korte-uitleg-maximaal-100-woorden" id="form-block-wat-korte-uitleg-maximaal-100-woorden" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-naam">Naam</label> <input type="text" name="naam" id="form-block-naam" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-mobiel-telefoonnummer">Mobiel telefoonnummer</label> <input type="tel" name="mobiel-telefoonnummer" id="form-block-mobiel-telefoonnummer" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-e-mail">E-mail</label> <input type="email" name="e-mail" id="form-block-e-mail" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-url-1">URL 1</label> <input type="url" name="url-1" id="form-block-url-1" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-heb-je-verder-nog-opmerkingen-voor-de-agendaredactie">Heb je verder nog opmerkingen voor de agendaredactie?</label> <input type="text" name="heb-je-verder-nog-opmerkingen-voor-de-agendaredactie" id="form-block-heb-je-verder-nog-opmerkingen-voor-de-agendaredactie" value=""> </div> </div> <div class="form-block__button"> <button type="submit" class="btn btn-solid--blue form-block__submit" id="custom-form-submit-btn">Verstuur agendatip</button> </div> </form> <div class="form-block__success js-custom-form-success"> <p>Bedankt, het formulier is succesvol verzonden</p> </div> </div>

Forms - simple

Form fields
Neem contact op:

Bedankt! We nemen zo snel mogelijk contact met je op.



<div class="block form-block block--small"> <h5 class="form-block__title">Neem contact op:</h5> <form class="form-block__form" id="custom-form" action="/form/send" method="post" data-key=""> <input type="hidden" name="_token" value=""> <div class="form-block__fields"> <input type="hidden" name="block_id" value="6244"> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-name">Naam</label> <input type="text" name="name" id="form-block-name" value="" required=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-email">Email</label> <input type="email" name="email" id="form-block-email" value="" required=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-telefoonnummer">Telefoonnummer</label> <input type="text" name="telefoonnummer" id="form-block-telefoonnummer" value=""> </div> <div class="form-block__input"> <label class="form-block__label label__input" for="form-block-jouw-bericht">Jouw bericht</label> <input type="text" name="jouw-bericht" id="form-block-jouw-bericht" value=""> </div> </div> <div class="form-block__button"> <button type="submit" class="btn btn-solid--blue form-block__submit" id="custom-form-submit-btn">Verstuur</button> </div> </form> <div class="form-block__success js-custom-form-success"> <p>Bedankt! We nemen zo snel mogelijk contact met je op.</p> </div> </div>

Navigatie

Navigation blue

Color scheme: Blue & White

Navigation yellow

Color scheme: Yellow & Blue

Navigation aqua

Color scheme: Aqua & Blue

Navigation lightblue

Color scheme: Lightblue & Blue

Navigation white

Color scheme: White & Blue (black, grey & lightgrey use this navigation)

<nav class="nav nav--COLOR is-visible"> <div class="nav__container--tiny"> <!-- LOGO --> <a href="" class="nav__logo"> <svg width="185px" height="39px" viewBox="0 0 185 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-90.000000, -70.000000)" fill="#FFFFFF"><g transform="translate(90.000000, 70.000000)"><path d="M7.05254091,24.813289 C10.947213,24.813289 14.1050818,27.9706657 14.1050818,31.8658299 C14.1050818,35.7609942 10.947213,38.9183709 7.05254091,38.9183709 C3.15737665,38.9183709 -1.42108547e-13,35.7609942 -1.42108547e-13,31.8658299 C-1.42108547e-13,27.9706657 3.15737665,24.813289 7.05254091,24.813289 Z M53.6426234,0.491940445 L75.631057,38.9184201 L63.5695337,38.9184201 L58.07181,29.2587671 L37.364538,29.2587671 L31.8677987,38.9184201 L19.8062754,38.9184201 L41.7942168,0.491940445 L53.6426234,0.491940445 Z M92.7031377,0.492088101 L118.908133,23.280817 L118.908133,0.492088101 L129.582183,0.492088101 L129.582183,38.9185677 L121.042746,38.9185677 L94.8377507,16.1298388 L94.8377507,38.9185677 L84.1637012,38.9185677 L84.1637012,0.492088101 L92.7031377,0.492088101 Z M142.585062,0.492088101 L171.682146,0.492088101 C178.72632,0.492088101 184.43716,6.20292851 184.43716,13.2475944 C184.43716,20.1886623 178.893051,25.8343686 171.992039,25.9989177 L171.682146,26.0026086 L153.259112,26.0026086 L153.259112,38.9185677 L142.585062,38.9185677 L142.585062,0.492088101 L171.682146,0.492088101 Z M47.7186662,10.952381 L42.4881998,20.1858004 L52.9486403,20.1858004 L47.7186662,10.952381 Z M171.815036,10.0990772 L153.392002,10.0990772 L153.392002,16.3961117 L171.815036,16.3961117 C173.553931,16.3961117 174.963554,14.9864895 174.963554,13.2475944 C174.963554,11.5082072 173.553931,10.0990772 171.815036,10.0990772 Z"></path></g></g></g></svg> </a> <ul class="nav__menu"> <li class="nav__item"> <a class="nav__link " href="">Diensten</a> </li> <li class="nav__item"> <a class="nav__link " href="">Creative Content</a> </li> <li class="nav__item"> <a class="nav__link " href="">Kennis</a> </li> <li class="nav__item"> <a class="nav__link " href="">Over Ons</a> </li> <a href="" class="btn-solid--blue nav__button">Contact</a> </ul> <div class="nav__hamburger"> <div class="hamburger js-open-menu"> <span class="hamburger__icon--before"></span> <span class="hamburger__icon"></span> <span class="hamburger__icon--after"></span> </div> </div> </div> </nav>

Navigation creative content

Available colors: blue, yellow, aqua, lightblue, white (black, grey & lightgrey use white navigation)

<nav class="nav nav--COLOR is-visible"> <div class="nav__container--tiny"> <!-- LOGO --> <a href="" class="nav__logo"> <svg width="185px" height="39px" viewBox="0 0 185 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-90.000000, -70.000000)" fill="#FFFFFF"><g transform="translate(90.000000, 70.000000)"><path d="M7.05254091,24.813289 C10.947213,24.813289 14.1050818,27.9706657 14.1050818,31.8658299 C14.1050818,35.7609942 10.947213,38.9183709 7.05254091,38.9183709 C3.15737665,38.9183709 -1.42108547e-13,35.7609942 -1.42108547e-13,31.8658299 C-1.42108547e-13,27.9706657 3.15737665,24.813289 7.05254091,24.813289 Z M53.6426234,0.491940445 L75.631057,38.9184201 L63.5695337,38.9184201 L58.07181,29.2587671 L37.364538,29.2587671 L31.8677987,38.9184201 L19.8062754,38.9184201 L41.7942168,0.491940445 L53.6426234,0.491940445 Z M92.7031377,0.492088101 L118.908133,23.280817 L118.908133,0.492088101 L129.582183,0.492088101 L129.582183,38.9185677 L121.042746,38.9185677 L94.8377507,16.1298388 L94.8377507,38.9185677 L84.1637012,38.9185677 L84.1637012,0.492088101 L92.7031377,0.492088101 Z M142.585062,0.492088101 L171.682146,0.492088101 C178.72632,0.492088101 184.43716,6.20292851 184.43716,13.2475944 C184.43716,20.1886623 178.893051,25.8343686 171.992039,25.9989177 L171.682146,26.0026086 L153.259112,26.0026086 L153.259112,38.9185677 L142.585062,38.9185677 L142.585062,0.492088101 L171.682146,0.492088101 Z M47.7186662,10.952381 L42.4881998,20.1858004 L52.9486403,20.1858004 L47.7186662,10.952381 Z M171.815036,10.0990772 L153.392002,10.0990772 L153.392002,16.3961117 L171.815036,16.3961117 C173.553931,16.3961117 174.963554,14.9864895 174.963554,13.2475944 C174.963554,11.5082072 173.553931,10.0990772 171.815036,10.0990772 Z"></path></g></g></g></svg> </a> <ul class="nav__menu"> <li class="nav__item"> <a class="nav__link " href="">Diensten</a> </li> <li class="nav__item"> <a class="nav__link " href="">Creative Content</a> </li> <li class="nav__item"> <a class="nav__link " href="">Kennis</a> </li> <li class="nav__item"> <a class="nav__link " href="">Over Ons</a> </li> <a href="" class="btn-solid--blue nav__button">Contact</a> </ul> <div class="nav__hamburger"> <div class="hamburger js-open-menu"> <span class="hamburger__icon--before"></span> <span class="hamburger__icon"></span> <span class="hamburger__icon--after"></span> </div> </div> </div> </nav>

Footer

Footer blue

Color scheme: Blue & White

<footer class="footer"> <div class="footer__container--large"> <div class="footer__grid"> <div class="footer__section footer__section--small"> <div class="footer__logo"> <svg width="185px" height="39px" viewBox="0 0 185 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-90.000000, -70.000000)" fill="#FFFFFF"> <g transform="translate(90.000000, 70.000000)"> <path d="M7.05254091,24.813289 C10.947213,24.813289 14.1050818,27.9706657 14.1050818,31.8658299 C14.1050818,35.7609942 10.947213,38.9183709 7.05254091,38.9183709 C3.15737665,38.9183709 -1.42108547e-13,35.7609942 -1.42108547e-13,31.8658299 C-1.42108547e-13,27.9706657 3.15737665,24.813289 7.05254091,24.813289 Z M53.6426234,0.491940445 L75.631057,38.9184201 L63.5695337,38.9184201 L58.07181,29.2587671 L37.364538,29.2587671 L31.8677987,38.9184201 L19.8062754,38.9184201 L41.7942168,0.491940445 L53.6426234,0.491940445 Z M92.7031377,0.492088101 L118.908133,23.280817 L118.908133,0.492088101 L129.582183,0.492088101 L129.582183,38.9185677 L121.042746,38.9185677 L94.8377507,16.1298388 L94.8377507,38.9185677 L84.1637012,38.9185677 L84.1637012,0.492088101 L92.7031377,0.492088101 Z M142.585062,0.492088101 L171.682146,0.492088101 C178.72632,0.492088101 184.43716,6.20292851 184.43716,13.2475944 C184.43716,20.1886623 178.893051,25.8343686 171.992039,25.9989177 L171.682146,26.0026086 L153.259112,26.0026086 L153.259112,38.9185677 L142.585062,38.9185677 L142.585062,0.492088101 L171.682146,0.492088101 Z M47.7186662,10.952381 L42.4881998,20.1858004 L52.9486403,20.1858004 L47.7186662,10.952381 Z M171.815036,10.0990772 L153.392002,10.0990772 L153.392002,16.3961117 L171.815036,16.3961117 C173.553931,16.3961117 174.963554,14.9864895 174.963554,13.2475944 C174.963554,11.5082072 173.553931,10.0990772 171.815036,10.0990772 Z"> </path> </g> </g> </g> </svg> </div> <div class="newsletter footer__newsletter"> <p class="footer__info">Ontdek het ANP via onze nieuwsbrieven.</p> <p class="newsletter__message js-newsletter-message"></p> <form class="footer__form" id="newsletter-form" action="https://anp.test/api/newsletter" method="post"> <input type="hidden" name="_token" value="fMik3VmAOR2Na8GdehSx4NPSsW4S5GB1xh8Hdu2w"> <div class="newsletter__inputs"> <div class="newsletter__input"> <label class="newsletter__label label__input" for="email">Typ je emailadres</label> <input type="text" name="email" id="email"> </div> </div> <div class="newsletter__options"> <div class="newsletter__check"> <input type="radio" id="list_1" name="list" value="list_1"> <label for="list_1">Algemeen</label> </div> </div> <div class="newsletter__button"> <button type="submit" class="btn btn-solid--white newsletter--arrow">Meld mij aan</button> </div> </form> </div> </div> <div class="footer__section"> <div class="footer__contact"> <h5 class="footer__head">Contact</h5> <p class="footer__info"> WTC C-Toren<br> 4e etage<br> Prinses Beatrixlaan 582<br> 2595 BM Den Haag<br> <a class="footer__link hover-underline" href="tel:070 414 14 14">070 414 14 14</a><br> <a class="footer__link hover-underline" href="mailto:info@anp.nl">info@anp.nl</a><br> </p> </div> <div class="footer__nav"> <h5 class="footer__head">Info</h5> <ul class="footer__menu"> <li class="footer__item"> <a class="footer__link hover-underline" href="">Diensten</a> </li> <li class="footer__item"> <a class="footer__link hover-underline" href="">Kennis</a> </li> <li class="footer__item"> <a class="footer__link hover-underline" href="">Over ANP</a> </li> <li class="footer__item"> <a class="footer__link hover-underline" href="">Vacatures</a> </li> <li class="footer__item"> <a class="footer__link hover-underline" href="">Privacy en voorwaarden</a> </li> <li class="footer__item"> <a class="footer__link hover-underline" href="">FAQ</a> </li> </ul> </div> <div class="footer__social"> <a href="https://www.facebook.com/hetalgemeennederlandspersbureau/" class="icon-ghost--white icon--medium social social--facebook" target="_blank"> <svg width="69px" height="153px" viewBox="0 0 69 153" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#000000" fill-rule="nonzero"> <path d="M42.935737,55.32771 L69,55.32771 L67.810345,81.192 L42.935737,81.192 L42.935737,153 L17.58797,153 L17.58797,81.192 L0,81.192 L0,55.32771 L17.58797,55.32771 L17.58797,33.295714 C17.58797,30.337714 17.885384,27.496286 18.49373,24.756857 C19.102077,22.032 20.007837,19.423714 21.197492,16.946571 C22.373629,14.469429 23.928292,12.210857 25.820925,10.156286 C27.727077,8.116286 29.917124,6.324 32.404585,4.779429 C34.878527,3.249429 37.785071,2.069143 41.110697,1.238571 C44.436324,0.408 48.059365,0 51.966301,0 C54.872845,0 57.725313,0.087429 60.523707,0.262286 C63.3221,0.422571 65.403997,0.597429 66.782915,0.772286 L68.837774,1.02 L68.283503,25.106571 L52.99373,25.106571 C50.884796,25.106571 49.14087,25.339714 47.761951,25.835143 C46.396552,26.316 45.369122,27.088286 44.679663,28.137429 C43.990204,29.186571 43.530564,30.352286 43.287226,31.634571 C43.057406,32.916857 42.935737,34.519714 42.935737,36.457714 L42.935737,37.652571 L42.935737,55.32771 Z"> </path> </g> </g> </svg> </a> <a href="https://twitter.com/anp" class="icon-ghost--white icon--medium social social--twitter" target="_blank"> <svg width="140px" height="113px" viewBox="0 0 140 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#000000" fill-rule="nonzero"> <path d="M44.02831,113 C96.86114,113 125.75336,69.53015 125.75336,31.83464 C125.75336,30.59994 125.72804,29.37084 125.67228,28.1473 C131.28066,24.12066 136.15522,19.09574 140,13.37553 C134.85343,15.64747 129.31505,17.17691 123.50513,17.86655 C129.43531,14.33491 133.98807,8.748279 136.13596,2.088389 C130.5863,5.35586 124.44048,7.730679 117.89675,9.012827 C112.65528,3.468051 105.1931,0 96.93039,0 C81.06833,0 68.20542,12.77529 68.20542,28.52265 C68.20542,30.76119 68.45741,32.9386 68.95023,35.02717 C45.07774,33.83419 23.909369,22.48284 9.742316,5.222372 C7.275531,9.438063 5.853141,14.33505 5.853141,19.56022 C5.853141,29.4572 10.924078,38.19429 18.635247,43.30561 C13.922761,43.16101 9.49591,41.87626 5.626701,39.73781 C5.622473,39.85749 5.622473,39.97418 5.622473,40.1021 C5.622473,53.91738 15.523343,65.45204 28.66625,68.06579 C26.252646,68.71928 23.713231,69.06968 21.09226,69.06968 C19.244286,69.06968 17.443854,68.88904 15.693878,68.55523 C19.350647,79.88973 29.95442,88.13784 42.52606,88.36833 C32.695188,96.02109 20.310996,100.57906 6.851449,100.57906 C4.535844,100.57906 2.248285,100.44825 0,100.18418 C12.712107,108.27646 27.80653,112.99819 44.02986,112.99819"> </path> </g> </g> </svg> </a> <a href="https://www.instagram.com/anp.nl/" class="icon-ghost--white icon--medium social social--instagram" target="_blank"> <svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#000000" fill-rule="nonzero"> <path d="M70.000139,0 L69.999583,0 C89.01043,0 91.395052,0.080581 98.860126,0.422633 C106.311028,0.761351 111.39926,1.944502 115.852018,3.673659 C120.523187,5.431706 124.754595,8.187648 128.251109,11.749262 C131.811999,15.245721 134.567337,19.476858 136.324981,24.14762 C138.055513,28.60013 139.238655,33.68841 139.578759,41.13937 C139.91942,48.6045 140,50.98942 140,70.00014 C140,89.01086 139.91942,91.39467 139.578759,98.86091 C139.238655,106.31159 138.055513,111.39987 136.324981,115.85266 C132.688437,125.25528 125.255394,132.68838 115.852852,136.32495 C111.400371,138.0555 106.31214,139.23865 98.861237,139.57876 C91.396164,139.91942 89.011263,140 70.000695,140 C50.990126,140 48.606337,139.91942 41.140152,139.57876 C33.689528,139.23865 28.601296,138.0555 24.148538,136.32495 C19.477815,134.56729 15.246711,131.81193 11.75028,128.25102 C8.189412,124.75454 5.434077,120.52341 3.676408,115.85266 C1.945876,111.40014 0.762735,106.31187 0.42263,98.86091 C0.08058,91.39578 0,89.01114 0,70.00014 C0,50.98914 0.08058,48.6045 0.42263,41.13937 C0.761345,33.68841 1.944487,28.60013 3.67363,24.14734 C5.431941,19.476386 8.188046,15.245235 11.749725,11.748984 C15.246167,8.18808 19.477267,5.432723 24.147982,3.675048 C28.600462,1.944502 33.688694,0.761351 41.139597,0.421244 C48.60467,0.080581 50.989292,0 70.000139,0 Z M69.999583,12.612868 L70.000139,12.61259 C51.308835,12.61259 49.095099,12.684002 41.713662,13.020774 C34.888785,13.331984 31.182368,14.472343 28.715776,15.430979 C25.675375,16.553153 22.925117,18.342458 20.667189,20.667353 C18.34207,22.925317 16.552582,25.6757 15.430301,28.71628 C14.471673,31.18317 13.3316,34.88934 13.020115,41.71427 C12.683345,49.09632 12.611934,51.30952 12.611934,70.00097 C12.611934,88.69242 12.683345,90.90646 13.020115,98.28767 C13.331322,105.1126 14.471673,108.81905 15.430301,111.28566 C16.552466,114.32609 18.341757,117.07637 20.666634,119.33431 C22.924549,121.65922 25.674811,123.44853 28.71522,124.57069 C31.18209,125.52905 34.88823,126.66941 41.713106,126.98089 C49.093987,127.31767 51.30689,127.38908 69.999583,127.38908 C88.692276,127.38908 90.906013,127.31767 98.28606,126.98089 C105.110937,126.66968 108.817355,125.52932 111.283946,124.57069 C117.388718,122.21575 122.213941,117.39048 124.568865,111.28566 C125.527216,108.81877 126.667566,105.1126 126.979051,98.28767 C127.315821,90.90562 127.387232,88.69242 127.387232,70.00097 C127.387232,51.30952 127.315821,49.09577 126.979051,41.71427 C126.667844,34.88934 125.527494,31.18289 124.568865,28.71628 C123.446709,25.67585 121.657417,22.925571 119.332533,20.667631 C117.074611,18.342729 114.324351,16.553422 111.283946,15.431257 C108.817077,14.472621 105.110937,13.332539 98.28606,13.021052 C90.904068,12.684279 88.690331,12.612868 69.999583,12.612868 Z M69.668246,33.83886 C89.456269,33.83886 105.49763,49.88022 105.49763,69.66825 C105.49763,89.45627 89.456269,105.49763 69.668246,105.49763 C49.880224,105.49763 33.838863,89.45627 33.838863,69.66825 C33.838863,49.88022 49.880224,33.83886 69.668246,33.83886 Z M69.668246,92.9257 C82.51303,92.9257 92.925827,82.51303 92.92598,69.66825 C92.92598,56.82354 82.513318,46.41084 69.668616,46.41079 C56.823913,46.41074 46.411169,56.82336 46.411067,69.66806 C46.410965,82.51276 56.823544,92.92555 69.668246,92.9257 Z M105.43128,37.6872 C101.803476,37.6872 98.862559,34.74629 98.862559,31.11848 C98.862559,27.49068 101.803476,24.54976 105.43128,24.54976 C109.059084,24.54976 112,27.49068 112,31.11848 C112,34.74629 109.059084,37.6872 105.43128,37.6872 Z"> </path> </g> </g> </svg> </a> <a href="https://nl.linkedin.com/company/hetanp" class="icon-ghost--white icon--medium social social--linkedin" target="_blank"> <svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M30.1788618,128 L3.12195122,128 L3.12195122,42.6666667 L30.1788618,42.6666667 L30.1788618,128 Z M15.6097588,31.2195122 C6.99087314,31.2195122 0,24.1143221 0,15.5361049 C0,6.95575075 6.98872665,0 15.6097588,0 C24.2307855,0 31.2195122,6.95575075 31.2195122,15.5361049 C31.2195122,24.1143221 24.2257394,31.2195122 15.6097588,31.2195122 Z M127.971249,128 L101.322773,128 L101.322773,86.4880274 C101.322773,76.5947208 101.121502,63.9073393 87.4378509,63.9073393 C73.5529293,63.9073393 71.4251896,74.6559753 71.4251896,85.7752534 L71.4251896,128 L44.7479675,128 L44.7479675,42.7236886 L70.3613251,42.7236886 L70.3613251,54.3561646 L70.7351142,54.3561646 C74.3005128,47.6560863 83.009858,40.5853659 96.003434,40.5853659 C123.031445,40.5853659 128,58.2336563 128,81.1564764 L128,128 L127.971249,128 Z" fill="#000000" fill-rule="nonzero"></path> </g> </svg> </a> <div class="footer__credits" href="https://www.vruchtvlees.com" target="_blank"> <a href="https://www.vruchtvlees.com" target="_blank" class="footer__vruchtvlees">Design &amp; Development <svg width="149px" height="15px" viewBox="0 0 149 15" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#FFFFFF" fill-rule="nonzero"> <g> <path d="M13,15 L9.6981948,15 L6.78664454,5.42478414 C6.71996782,5.22041914 6.66440388,5.03362694 6.62256751,4.86961427 L6.54150953,4.58194125 L6.47940866,4.84683473 L6.39508221,5.11628412 C6.36893448,5.21195817 6.34213305,5.31414067 6.31206316,5.42478414 L3.38351687,15 L0,15 L4.93080907,0 L8.08880173,0 L13,15 Z"> </path> <path d="M22.640736,9.12353018 C22.3121579,8.78118627 21.8638058,8.60871263 21.2956795,8.60871263 L19.2339001,8.60871263 L19.2339001,12.2254523 L21.2956795,12.2254523 C21.8100035,12.2254523 22.2449051,12.0705515 22.6010248,11.764004 C22.9584255,11.455504 23.1364854,11.0396147 23.1364854,10.5202412 C23.1364854,9.93057665 22.9718761,9.46587408 22.640736,9.12353018 Z M27,0 L23.0775591,6.26892871 C24.0485618,6.5383781 24.8383021,7.03887708 25.4538256,7.75610709 C26.065506,8.47594047 26.373588,9.39688463 26.373588,10.5202412 C26.373588,11.1645767 26.2550949,11.7607498 26.0174683,12.3081095 C25.7843251,12.8567709 25.442937,13.3273311 24.9977874,13.7249967 C24.5539187,14.1233132 24.0171771,14.4350675 23.3901246,14.662212 C22.7617911,14.887404 22.0668452,15 21.2956795,15 L16,15 L16,0 L19.2339001,0 L19.2339001,7.08899206 L23.3395249,0 L27,0 Z"> </path> <path d="M43,6.22705541 L43,15 L39.7296417,15 L39.7296417,6.22705541 C39.7296417,5.72697003 39.6429967,5.26658414 39.4736156,4.84013489 C39.3022801,4.41688722 39.065798,4.05382908 38.7628664,3.75288141 C38.4631922,3.44553061 38.113355,3.2105353 37.714658,3.04277299 C37.3179153,2.87373004 36.8859935,2.78920857 36.4201954,2.78920857 C35.9648208,2.78920857 35.5504886,2.87373004 35.1752443,3.04277299 C34.7973941,3.2105353 34.4690554,3.44553061 34.1876221,3.75288141 C33.904886,4.05382908 33.6905537,4.41688722 33.5387622,4.84013489 C33.3889251,5.26658414 33.3140065,5.72697003 33.3140065,6.22705541 L33.3140065,15 L30,15 L30,6.22705541 C30,5.21599932 30.1732899,4.32212072 30.5166124,3.54798088 C30.857329,2.77192009 31.3276873,2.12328182 31.9166124,1.59758388 C32.5055375,1.07188594 33.1856678,0.674250832 33.9615635,0.404038248 C34.7368078,0.133825664 35.5543974,0 36.4201954,0 C37.295114,0 38.134202,0.133825664 38.9289902,0.404038248 C39.723127,0.674250832 40.4234528,1.07188594 41.0260586,1.59758388 C41.629316,2.12328182 42.1100977,2.77192009 42.465798,3.54798088 C42.8221498,4.32212072 43,5.21599932 43,6.22705541"> </path> <path d="M59,2.34875221 L57.1573604,4.43660197 C56.9175127,4.21225107 56.677665,3.99798336 56.4359137,3.79884043 C56.197335,3.6015881 55.9327411,3.42765314 55.6446701,3.28270734 C55.3585025,3.13650113 55.036802,3.0173935 54.6840102,2.92475422 C54.3305838,2.83211495 53.9251269,2.78548021 53.4714467,2.78548021 C52.1091371,2.78548021 51.072335,3.21023443 50.3661168,4.05974288 C49.6586294,4.90736073 49.305203,6.08142173 49.305203,7.58129569 C49.305203,8.24426519 49.4029188,8.86123015 49.5939086,9.42966978 C49.7887056,10.0012604 50.0640863,10.4915553 50.4156091,10.9011848 C50.7709391,11.3152256 51.2005076,11.6341064 51.7100254,11.8672801 C52.2170051,12.0998235 52.7823604,12.2176708 53.4130711,12.2176708 C54.7468274,12.2176708 55.9029188,11.7305268 56.8769036,10.7638014 L58.6795685,12.8510209 C57.9187817,13.6217545 57.1205584,14.1719183 56.286802,14.5034031 C55.4505076,14.8367784 54.4942893,15 53.4130711,15 C52.3832487,15 51.4175127,14.8191328 50.5177665,14.4548777 C49.6154822,14.0899924 48.8305838,13.5770103 48.1630711,12.9228636 C47.4949239,12.2661961 46.9663706,11.4828586 46.5812183,10.572851 C46.194797,9.66599445 46,8.66712881 46,7.58129569 C46,6.41164608 46.180203,5.36236451 46.5399746,4.42714898 C46.9016497,3.49193345 47.4073604,2.69473154 48.0640863,2.03743383 C48.7170051,1.38202672 49.5044416,0.879127804 50.427665,0.526216284 C51.3477157,0.174565163 52.3642132,0 53.4714467,0 C54.7404822,0 55.8090102,0.208595916 56.677665,0.625787749 C57.5444162,1.04423998 58.3191624,1.6177212 59,2.34875221"> </path> <polygon points="74 0 74 15 70.6566604 15 70.6566604 8.77402699 65.3446639 8.77402699 65.3446639 15 62 15 62 0 65.3446639 0 65.3446639 5.99947932 70.6566604 5.99947932 70.6566604 0"> </polygon> <polygon points="86 12.2261032 86 15 77 15 77 12.2261032 79.9275723 12.2261032 79.9275723 0 83.1523113 0 83.1523113 12.2261032"> </polygon> <path d="M101,15 L97.6977072,15 L94.7889179,5.42478414 C94.7202836,5.22041914 94.6647224,5.03362694 94.6222345,4.86961427 L94.540527,4.58194125 L94.4784292,4.84683473 L94.3973753,5.11628412 C94.3679606,5.21195817 94.3418142,5.31414067 94.3123994,5.42478414 L91.3807321,15 L88,15 L92.9312148,0 L96.0897023,0 L101,15 Z"> </path> <polygon points="111 0 111 2.77389682 106.048711 2.77389682 106.048711 15 103 15 103 0"> </polygon> <polygon points="124 0 124 2.77389682 118.270665 2.77389682 118.270665 5.93960168 123.304651 5.93960168 123.304651 8.71414935 118.270665 8.71414935 118.270665 12.2248015 123.694124 12.2248015 123.694124 15 115 15 115 0"> </polygon> <polygon points="137 0 137 2.77389682 131.271255 2.77389682 131.271255 5.93960168 136.304802 5.93960168 136.304802 8.71414935 131.271255 8.71414935 131.271255 12.2248015 136.692247 12.2248015 136.692247 15 128 15 128 0"> </polygon> <path d="M148.741417,5.89893304 C148.568186,6.32865664 148.340583,6.70230194 148.061137,7.01041754 C147.782323,7.32357389 147.468736,7.5844325 147.121641,7.79803411 C146.776443,8.01037554 146.425555,8.19625305 146.065183,8.35314627 C145.639059,8.53965387 145.217993,8.70788877 144.798192,8.86226161 C144.380287,9.0128539 144.000316,9.1810888 143.659544,9.3587751 C143.321932,9.53772158 143.044383,9.7412417 142.831321,9.96366462 C142.619523,10.1917584 142.514573,10.4683693 142.514573,10.8016886 C142.514573,10.9478703 142.546184,11.1022431 142.613833,11.2679577 C142.678321,11.4336722 142.792122,11.5874149 142.952709,11.7279257 C143.110767,11.8659162 143.318771,11.9818533 143.571031,12.0751071 C143.823291,12.1664706 144.135614,12.2130975 144.509894,12.2130975 C145.040969,12.2130975 145.558134,12.1343359 146.055067,11.9749223 C146.555162,11.8142485 146.962319,11.6157691 147.284125,11.3750735 L148.719289,13.7461144 C148.119934,14.1815089 147.44155,14.500336 146.68477,14.7007057 C145.92546,14.8998152 145.199026,15 144.509894,15 C143.870709,15 143.238478,14.9180879 142.613833,14.7599345 C141.987292,14.6017811 141.432193,14.3528942 140.944743,14.0145342 C140.461086,13.6774343 140.067838,13.2414097 139.770058,12.7102411 C139.468483,12.1790725 139.320541,11.5451987 139.320541,10.8016886 C139.320541,10.2175922 139.386925,9.72170881 139.519062,9.31025792 C139.649934,8.89817693 139.836442,8.5371335 140.077322,8.22334706 C140.315673,7.91208099 140.596384,7.64492145 140.915028,7.41871797 C141.236834,7.19251449 141.574445,6.98395363 141.934185,6.78232378 C142.240185,6.60967823 142.613833,6.4445938 143.053866,6.2858103 C143.490738,6.1270268 143.914965,5.95060069 144.330973,5.75905234 C144.741291,5.56750399 145.091547,5.33941023 145.37858,5.08170209 C145.662452,4.82399395 145.807865,4.51587835 145.807865,4.15735529 C145.807865,3.72070066 145.681419,3.38234059 145.425997,3.14353524 C145.173105,2.9047299 144.681861,2.783752 143.949738,2.783752 C143.350382,2.783752 142.759246,2.90788037 142.176961,3.15298664 C141.58709,3.39809292 141.082569,3.69234647 140.656446,4.03952785 L139,1.81088801 C139.703673,1.26648744 140.442119,0.827942535 141.214706,0.496513484 C141.987292,0.166344619 142.878738,0 143.889676,0 C145.473415,0 146.720807,0.381206419 147.63122,1.14235907 C148.544161,1.90477191 149,2.97656053 149,4.35520457 C149,4.95442325 148.91212,5.46668907 148.741417,5.89893304"> </path> </g> </g> </g> </svg> </a> </div> </div> </div> </div> </div> </footer>

Page headers

Header - Diensten

Color scheme: Blue & White

Nieuws binnen je branche.

N i e u w s b i n n e n j e b r a n c h e .

Het ANP maakt het nieuws bruikbaar voor jou.
Denk aan een handig overzicht met belangrijke nieuwsevents of kant-en-klare nieuwsfeeds. Zo win je het vertrouwen van je doelgroep en neem je de juiste beslissingen.



<header class="header header__overview header--blue "> <div class="header__container--large"> <div class="header__grid "> <div class="header__section--half "> <h1 class="header__title" >Nieuws binnen je branche.</h1> <div class="h1 header__title header__title--animated"> <span class="animated-text"> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">N</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">u</span> <span class="animated-text__letter header__letter">w</span> <span class="animated-text__letter header__letter">s</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">b</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">n</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">j</span> <span class="animated-text__letter header__letter">e</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">b</span> <span class="animated-text__letter header__letter">r</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">c</span> <span class="animated-text__letter header__letter">h</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">.</span> </span> </span> </div> </div> <div class="header__section--half "> <p class="header__text">Het ANP maakt het nieuws bruikbaar voor jou. <br> Denk aan een handig overzicht met belangrijke nieuwsevents of kant-en-klare nieuwsfeeds. Zo win je het vertrouwen van je doelgroep en neem je de juiste beslissingen.</p> </div> </div> </div> </header>

Header - Creative Content

Color scheme: Lightblue & Blue

Creative Content



<header class="header header__creative-content header--aqua"> <div class="header__container--large"> <h1 class="header__title header__title--large">Creative Content</h1> </div> </header>

Header - Kennis

Color scheme: Yellow & Blue

Van interviews tot cases.

V a n i n t e r v i e w s t o t c a s e s .

Feitelijk gecheckt nieuws begint bij het ANP.
Ontdek hier wie de gezichten zijn achter de organisatie, hoe andere bedrijven groeien met het ANP en ga direct aan de slag met onze tips.



<header class="header header__overview header--yellow "> <div class="header__container--large"> <div class="header__grid "> <div class="header__section--half "> <h1 class="header__title">Van interviews tot cases.</h1> <div class="h1 header__title header__title--animated"> <span class="animated-text"> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">V</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">n</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">r</span> <span class="animated-text__letter header__letter">v</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">w</span> <span class="animated-text__letter header__letter">s</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">t</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">c</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">.</span> </span> </span> </div> </div> <div class="header__section--half "> <p class="header__text">Feitelijk gecheckt nieuws begint bij het ANP. <br> Ontdek hier wie de gezichten zijn achter de organisatie, hoe andere bedrijven groeien met het ANP en ga direct aan de slag met onze tips.</p> </div> </div> </div> </header>

Header - Over Ons & Contact

Color scheme: White & Blue

Aan de basis van het nieuws. Sinds 1934.

A a n d e b a s i s v a n h e t n i e u w s . S i n d s 1 9 3 4 .

Aannames en onjuistheden worden in de huidige maatschappij steeds vaker gebruikt als ‘bron’ voor nieuws. Daarom is het, juist nu, van belang dat je kunt vertrouwen op een onafhankelijke bron die op transparante wijze betrouwbaar nieuws levert. Dat doet het ANP.



<header class="header header__page header--white"> <div class="header__container--large"> <div class="header__grid"> <div class="header__section header__section--center"> <h1 class="header__title header__title--wide h2">Aan de basis van het nieuws. Sinds 1934.</h1> <div class="header__title header__title--animated header__title--wide h2"> <span class="animated-text"> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">A</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">n</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">d</span> <span class="animated-text__letter header__letter">e</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">b</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">s</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">v</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">n</span> </span> <span class="animated-text__word header__word"></span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">h</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">t</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">u</span> <span class="animated-text__letter header__letter">w</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">.</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">S</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">d</span> <span class="animated-text__letter header__letter">s</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">1</span> <span class="animated-text__letter header__letter">9</span> <span class="animated-text__letter header__letter">3</span> <span class="animated-text__letter header__letter">4</span> <span class="animated-text__letter header__letter">.</span> </span> </span> </div> <p class="header__text">Aannames en onjuistheden worden in de huidige maatschappij steeds vaker gebruikt als ‘bron’ voor nieuws. Daarom is het, juist nu, van belang dat je kunt vertrouwen op een onafhankelijke bron die op transparante wijze betrouwbaar nieuws levert. Dat doet het ANP.</p> </div> </div> </div> </header>

Globals

Contact

Color scheme: Yellow & Blue

Contact

Neem contact op

Meer weten? We beantwoorden je vragen op werkdagen van 10:00 tot 17:00 uur.

Bel me terug

Laat je nummer achter en we bellen
je zo snel mogelijk terug.

Bedankt! Je wordt zo snel mogelijk terug gebeld.

Je gaat akkoord met de voorwaarden


<section class="contact combi:yellow" id="contact"> <div class="contact__container--large"> <h2 class="section__title contact__title">Contact</h2> <p class="section__info contact__info">Heb je een ander idee of vragen over één van onze diensten?</p> <div class="contact__grid"> <div class="contact__section"> <h5 class="contact__head">Neem contact op</h5> <p class="contact__desc">Meer weten? We beantwoorden je vragen op werkdagen van 10:00 tot 17:00 uur.</p> <div class="contact__icons"> <div class="icon__content contact__icon"> <span class="icon-solid--blue icon--small"> <svg width="17px" height="11px" viewBox="0 0 17 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-345.000000, -282.000000)" fill="#0039D8"> <path d="M361.88643,282.778306 L353.625444,288.417813 L345.36443,282.778306 L345.364778,292.976222 L361.887,292.976222 L361.88643,282.778306 Z M361.14843,282.273306 L346.10143,282.273306 L353.625444,287.408854 L361.14843,282.273306 Z"> </path> </g> </g> </svg> </span> <a class="hover-underline" href="mailto:info@anp.nl">info@anp.nl</a> </div> <div class="icon__content contact__icon"> <span class="icon-solid--blue icon--small"> <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-315.000000, -280.000000)" fill="#0039D8"> <path d="M319.380333,281.387778 C318.673667,280.747778 317.641444,280.75 317.012556,281.423333 C316.864778,281.581111 316.710333,281.735556 316.551444,281.883333 C316.249222,282.165556 315.961444,282.455556 315.880333,282.885556 C315.880333,282.888889 315.873667,282.891111 315.869222,282.893333 L315.869222,283.601111 C315.878111,283.647778 315.888111,283.693333 315.894778,283.738889 C315.971444,284.308889 316.017,284.885556 316.130333,285.447778 C316.458111,287.061111 317.131444,288.527778 318.114778,289.847778 C319.240333,291.36 320.659222,292.522222 322.363667,293.33 C323.914778,294.064444 325.551444,294.428889 327.265889,294.416667 C327.551444,294.415556 327.834778,294.314444 328.050333,294.103333 C328.351444,293.808889 328.647,293.511111 328.942556,293.212222 C329.221444,292.931111 329.359222,292.583333 329.379222,292.194444 C329.422556,291.384444 328.848111,290.594444 328.061444,290.373333 C327.503667,290.215556 326.945889,290.057778 326.383667,289.916667 C325.759222,289.76 325.207,289.908889 324.740333,290.355556 C324.570333,290.518889 324.402556,290.685556 324.241444,290.857778 C324.179222,290.923333 324.123667,290.927778 324.043667,290.904444 C323.243667,290.667778 322.507,290.305556 321.842556,289.801111 C320.631444,288.878889 319.813667,287.685556 319.389222,286.224444 C319.375889,286.178889 319.400333,286.103333 319.433667,286.067778 L319.971444,285.523333 C320.365889,285.102222 320.522556,284.595556 320.403667,284.036667 C320.281444,283.465556 320.099222,282.907778 319.955889,282.341111 C319.860333,281.961111 319.667,281.647778 319.380333,281.387778 Z"> </path> </g> </g> </svg> </span> <a class="hover-underline" href="tel:070 414 14 14">070 414 14 14</a> </div> </div> </div> <div class="contact__section"> <h5 class="contact__head">Bel me terug</h5> <p class="contact__desc js-contact-desc">Laat je nummer achter en we bellen<br> je zo snel mogelijk terug.</p> <p class="contact__success js-contact-success">Bedankt! Je wordt zo snel mogelijk terug gebeld.</p> <form class="contact__form" id="contact-form" action="" method="post" data-key="6Ldx88IUAAAAAHHS8FyclPXviIrdlqjaOZAYvSsr"> <input type="hidden" name="_token" value="fMik3VmAOR2Na8GdehSx4NPSsW4S5GB1xh8Hdu2w"> <div class="contact__inputs"> <div class="contact__input"> <label class="contact__label label__input" for="contact-name-input">Naam</label> <input type="text" name="name" id="contact-name-input" value=""> </div> <div class="contact__input"> <label class="contact__label label__input" for="contact-phone-input">Telefoonnummer</label> <input type="text" name="phone" id="contact-phone-input" value=""> </div> </div> <em class="contact__disclaimer"> Je gaat akkoord met de <a href="https://anp.test/privacy-en-voorwaarden">voorwaarden</a> </em> <div class="contact__button"> <button type="submit" class="btn btn-solid--blue contact__submit" id="contact-submit-btn">Verstuur</button> </div> </form> </div> </div> </div> </section>

Cards

Cards - Kennismaking

Card includes: Icon, Title, Introduction

<div class="overview__grid"> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt="Caption"> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Tip</div> <div class="card__title">Lorem ipsum dolor sit amet</div> <div class="card__date">25 nov 2020</div> </div> </a> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt=""> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Tip</div> <div class="card__title">Bloggen voor je bedrijf: 15 redenen om (weer) te beginnen</div> <div class="card__date">01 sep 2020</div> </div> </a> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt=""> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Mededeling</div> <div class="card__title">Het ANP geeft deskundigen een podium met Expert Support</div> <div class="card__date">24 aug 2020</div> </div> </a> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt="Mark Rutte, Jaap van Dissel en Irma Sluis voor een persconferentie rondom corona. Foto: Phil Nijhuis"> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Mededeling</div> <div class="card__title">Vier ANP-fotografen zijn genomineerd voor de Prinsjesfotoprijs</div> <div class="card__date">18 aug 2020</div> </div> </a> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt="Projectmanager Loredana Vulcano met een van de kunstfoto’s uit de fotowinkel in haar hand. Foto: Jorien de Waard"> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Blik op het ANP</div> <div class="card__title">Projectmanager Loredana Vulcano vertelt over de ANP fotowinkel. ‘Kunstfoto’s waar je naar blijft kijken.’</div> <div class="card__date">17 aug 2020</div> </div> </a> <a href="" class="card overview__item"> <div class="card__thumb"> <img class="card__image" src="" alt="Een Zwarte Piet in het Friese dorp Grou tijdens de intocht van 2019. Foto: ANP / Koen van Weel"> </div> <div class="card__content"> <div class="card__tag tag-ghost--blue">Achter het nieuws</div> <div class="card__title">Deze foto wordt geweerd van Facebook, maar staat nog wel in de ANP-beeldbank.</div> <div class="card__date">13 aug 2020</div> </div> </a> </div>

Kennis detail pagina

Kennis - Header

Color scheme: Blue & White
Case

Het ANP maakt voor gaststad Rotterdam duurzame e-magazines over het Songfestival

H e t A N P m a a k t v o o r g a s t s t a d R o t t e r d a m d u u r z a m e e - m a g a z i n e s o v e r h e t S o n g f e s t i v a l
Door Loredana Vulcano · 18 May 2021
Open up to Rotterdam: een drietal e-magazines over het Songfestival.


<header class="header header__article"> <div class="header__container--medium"> <div class="header__grid"> <div class="header__section--contained"> <span class="header__tag tag-ghost--blue">Case</span> <h1 class="h2 header__title header__title--wide">Het ANP maakt voor gaststad Rotterdam duurzame <span class="hyphens">e-magazines</span> over het <span class="hyphens">Songfestival</span> </h1> <div class="h2 header__title header__title--animated header__title--wide"> <span class="animated-text"> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">H</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">t</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">A</span> <span class="animated-text__letter header__letter">N</span> <span class="animated-text__letter header__letter">P</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">m</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">k</span> <span class="animated-text__letter header__letter">t</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">v</span> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">r</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">g</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">d</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">R</span> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">r</span> <span class="animated-text__letter header__letter">d</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">m</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">d</span> <span class="animated-text__letter header__letter">u</span> <span class="animated-text__letter header__letter">u</span> <span class="animated-text__letter header__letter">r</span> <span class="animated-text__letter header__letter">z</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">m</span> <span class="animated-text__letter header__letter">e</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">-</span> <span class="animated-text__letter header__letter">m</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">g</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">z</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">s</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">v</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">r</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">h</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">t</span> </span> <span class="animated-text__word header__word"> <span class="animated-text__letter header__letter">S</span> <span class="animated-text__letter header__letter">o</span> <span class="animated-text__letter header__letter">n</span> <span class="animated-text__letter header__letter">g</span> <span class="animated-text__letter header__letter">f</span> <span class="animated-text__letter header__letter">e</span> <span class="animated-text__letter header__letter">s</span> <span class="animated-text__letter header__letter">t</span> <span class="animated-text__letter header__letter">i</span> <span class="animated-text__letter header__letter">v</span> <span class="animated-text__letter header__letter">a</span> <span class="animated-text__letter header__letter">l</span> </span> </span> </div> <div class="header__meta"> Door Loredana Vulcano · 18 May 2021 </div> </div> <div class="header__section header__section--wide"> <figure class="header__figure"> <div class="header__holder"> <img class="header__image" title="Case" src=""> </div> <figcaption class="header__caption header__caption--overlay">Open up to Rotterdam: een drietal e-magazines over het Songfestival.</figcaption> </figure> </div> </div> </div> </header>

Kennis - Double image

Color scheme: Blue & White
Jeangu Macrooy, de Nederlandse inzending van dit jaar, tijdens de eerste dress rehearsal. ANP Pool / Patrick van Emst
De hosts - Nikkie de Jager, Chantal Janzen, Jan Smit en Edsilia Rombley - van het Eurovisie Songfestival 2021 in Rotterdam. ANP Pool / Patrick van Katwijk


<div class="block double-image-block block--large"> <div class="double-image-block__grid"> <figure class="double-image-block__figure js-enlarge" data-enlarge="https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/anp-431469463-4831a_1280x.jpg"> <img class="image-block__image js-blocked" src="https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/anp-431469463-4831a_900x.jpg" alt=""> <figcaption class="image-block__caption">Jeangu Macrooy, de Nederlandse inzending van dit jaar, tijdens de eerste dress rehearsal. ANP Pool / Patrick van Emst</figcaption> </figure> <figure class="double-image-block__figure js-enlarge" data-enlarge="https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/anp-430978108-65ecb_1280x.jpg"> <img class="image-block__image js-blocked" src="https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/anp-430978108-65ecb_900x.jpg" alt=""> <figcaption class="image-block__caption">De hosts - Nikkie de Jager, Chantal Janzen, Jan Smit en Edsilia Rombley - van het Eurovisie Songfestival 2021 in Rotterdam. ANP Pool / Patrick van Katwijk</figcaption> </figure> </div> </div>

Kennis - Text

Color scheme: Blue & White (first paragraph will be highlighted)

Drieluik

Het coronavirus bracht op woensdag 18 maart 2020 een voorlopig eind aan de organisatie van het festival.

Op papier bleven de plannen bestaan. En terecht: op 18 maart 2021 start, na een jaar wachten, dan eindelijk het het Eurovisie Songfestival in Rotterdam. In het tweede e-magazine lees je alles over hoe Rotterdam zich achter de schermen heeft voorbereid op de komst van het evenement. Met een creatief en innovatief stadsprogramma voor en door Rotterdammers, artistieke en kleurrijke stadsaankleding en een unieke Eurovision Village. De eerste online-Village in de geschiedenis van het Eurovisie Songfestival. Het derde magazine wordt een eindrapportage over het Eurovisie Songfestival en alles daaromheen. Het dient tevens als verantwoording naar de stad.



<article class="blocks combi:white"> <div class="block text-block block--small"> <h3>Drieluik</h3> <p>Het coronavirus bracht op woensdag 18 maart 2020 een voorlopig eind aan de organisatie van het festival.</p> <p> Op papier bleven de plannen bestaan. En terecht: op 18 maart 2021 start, na een jaar wachten, dan eindelijk het het Eurovisie Songfestival in Rotterdam. In het tweede e-magazine lees je alles over hoe Rotterdam zich achter de schermen heeft voorbereid op de komst van het evenement. Met een creatief en innovatief stadsprogramma voor en door Rotterdammers, artistieke en kleurrijke stadsaankleding en een unieke Eurovision Village. De eerste online-Village in de geschiedenis van het Eurovisie Songfestival. Het derde magazine wordt een eindrapportage over het Eurovisie Songfestival en alles daaromheen. Het dient tevens als verantwoording naar de stad.</p> </div> </article>

Kennis - Cta

Color scheme: Blue & White

<article class="blocks combi:white"> <div class="block cta-block block--small"> <h3 class="cta-block__title">Bekijk het tweede e-magazine</h3> <p></p> <a href="https://e-magazine2021.openuptorotterdam.eu/" target="_blank" class="btn-icon "> <span class="icon-solid--blue icon--small"> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> </span> <span class="btn-icon__text">De weg naar het Songfestival</span> </a> </div> </article>

Kennis - Author

Color scheme: Blue & White
Loredana Vulcano
Loredana Vulcano
loredana.vulcano@anp.nl


<section class="author"> <span class="author__avatar avatar avatar--large"> <img class="avatar__image" src="https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/2020-05-11-329f4_100x100.jpg" alt="Loredana Vulcano"> </span> <div class="author__content"> <div class="author__name">Loredana Vulcano</div> <div class="author__role">loredana.vulcano@anp.nl</div> </div> <span class="author__share icon-ghost--blue icon--medium" data-module="social" data-config="{ &quot;type&quot;: &quot;copy&quot; }"> <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-384.000000, -273.000000)" fill="#0039D8"> <path d="M396.598743,282.401296 C394.722873,280.525517 391.679059,280.525517 389.803274,282.401296 L385.406838,286.797718 C383.531054,288.673582 383.531054,291.717387 385.406838,293.593166 C387.282708,295.468945 390.326522,295.468945 392.202307,293.593166 L392.202307,293.592158 L396.598743,289.195735 C396.706939,289.090849 396.768767,288.946212 396.769901,288.794956 C396.770974,288.643697 396.711357,288.497963 396.604262,288.390869 C396.497171,288.283775 396.352534,288.224157 396.201277,288.225261 C396.050015,288.226366 395.905383,288.288193 395.799394,288.396389 L395.799394,288.397493 L391.402958,292.793916 C389.956699,294.240227 387.652407,294.240227 386.206091,292.793916 C384.759775,291.347661 384.759775,289.043376 386.206091,287.597064 L390.602527,283.200642 C392.048786,281.75433 394.353078,281.75433 395.799394,283.200642 C395.905383,283.308838 396.050015,283.370668 396.201277,283.37177 C396.352539,283.372873 396.497168,283.313256 396.604262,283.206162 C396.711357,283.099071 396.770975,282.953331 396.769901,282.802075 C396.768766,282.650811 396.706939,282.506179 396.598743,282.401296 Z M404.593162,274.406834 C402.717293,272.531055 399.673478,272.531055 397.797693,274.406834 L393.401258,278.803257 C393.293061,278.909246 393.231233,279.053882 393.230099,279.205139 C393.229026,279.356398 393.288643,279.502134 393.395738,279.608123 C393.502829,279.715217 393.647461,279.774836 393.798723,279.773731 C393.949985,279.772626 394.094617,279.711904 394.200606,279.602603 L394.200606,279.603707 L398.597042,275.207284 C400.043301,273.760973 402.347593,273.760973 403.793909,275.207284 C405.240225,276.652409 405.240225,278.956694 403.793909,280.403005 L399.397473,284.799428 C397.951214,286.245739 395.646922,286.245739 394.200606,284.799428 C394.094617,284.690126 393.949985,284.629404 393.798723,284.628299 C393.647461,284.627194 393.501727,284.686814 393.395738,284.792803 C393.288643,284.899894 393.229025,285.045633 393.230099,285.196889 C393.231234,285.348151 393.293061,285.492782 393.401258,285.598771 C395.277127,287.47455 398.320941,287.47455 400.196726,285.598771 L404.593162,281.202282 C406.468946,279.326418 406.468946,276.282613 404.593162,274.406834 L404.593162,274.406834 Z"> </path> </g> </g> </svg> </span> </section>

Kennis - Quote

Color scheme: Blue & White

“Je hoort hoe er over bepaalde onderwerpen wordt gesproken en je ziet op welke thema’s het debat wordt gevoerd"

J e h o o r t h o e e r o v e r b e p a a l d e o n d e r w e r p e n w o r d t g e s p r o k e n e n j e z i e t o p w e l k e t h e m a s h e t d e b a t w o r d t g e v o e r d "

— Casper Brack


<article class="blocks combi:white"> <div class="block quote-block block--medium"> <blockquote class="quote-block__quote"> <p class="quote-block__text">“Je hoort hoe er over bepaalde <span class="hyphens">onderwerpen</span> wordt gesproken en je ziet op welke thema’s het debat wordt gevoerd" </p> <p class="quote-block__text quote-block__text--animated"> <span class="animated-text"> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">“</span> <span class="animated-text__letter quote-block__letter">J</span> <span class="animated-text__letter quote-block__letter">e</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">h</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">h</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">e</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">r</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">v</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">r</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">b</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">p</span> <span class="animated-text__letter quote-block__letter">a</span> <span class="animated-text__letter quote-block__letter">a</span> <span class="animated-text__letter quote-block__letter">l</span> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">e</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">n</span> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">w</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">p</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">n</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">w</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">g</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">s</span> <span class="animated-text__letter quote-block__letter">p</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">k</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">n</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">n</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">j</span> <span class="animated-text__letter quote-block__letter">e</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">z</span> <span class="animated-text__letter quote-block__letter">i</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">p</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">w</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">l</span> <span class="animated-text__letter quote-block__letter">k</span> <span class="animated-text__letter quote-block__letter">e</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">t</span> <span class="animated-text__letter quote-block__letter">h</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">m</span> <span class="animated-text__letter quote-block__letter">a</span> <span class="animated-text__letter quote-block__letter">’</span> <span class="animated-text__letter quote-block__letter">s</span> </span> <span class="animated-text__word quote-block__word"><span class="animated-text__letter quote-block__letter">h</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">b</span> <span class="animated-text__letter quote-block__letter">a</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">w</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">t</span> </span> <span class="animated-text__word quote-block__word"> <span class="animated-text__letter quote-block__letter">g</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">v</span> <span class="animated-text__letter quote-block__letter">o</span> <span class="animated-text__letter quote-block__letter">e</span> <span class="animated-text__letter quote-block__letter">r</span> <span class="animated-text__letter quote-block__letter">d</span> <span class="animated-text__letter quote-block__letter">"</span> </span> </span> </p> <cite class="quote-block__author">— Casper Brack</cite> </blockquote> </div> </article>

Kennis - Buttons

Color scheme: Blue & White

Meer informatie

Met de media monitoring tool ANP360+ weet je precies waar, wanneer en hoe vaak er over jouw organisatie (of die van je concurrent) door nieuwsmedia is geschreven en gesproken.

Media monitoring

Vraag een gratis demo aan

Wil jij media monitoring van het ANP uitproberen? Dat kan. Meld je aan via onderstaande button.

Aanmelden


<article class="blocks combi:white"> <div class="block button-block block--small"> <div class="button-block__grid"> <div class="button-block__item button-block__item--half button-block--border"> <h4 class="button-block__title">Meer informatie</h4> <p class="button__block__desc">Met de media monitoring tool ANP360+ weet je precies waar, wanneer en hoe vaak er over jouw organisatie (of die van je concurrent) door nieuwsmedia is geschreven en gesproken. </p> <a href="/haal-alles-uit-anp360" target="_blank" class="btn-icon "> <span class="icon-solid--blue icon--small"> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> </span> <span class="btn-icon__text">Media monitoring</span> </a> </div> <div class="button-block__item button-block__item--half button-block--border"> <h4 class="button-block__title">Vraag een gratis demo aan</h4> <p class="button__block__desc">Wil jij media monitoring van het ANP uitproberen? Dat kan. Meld je aan via onderstaande button.</p> <a href="/diensten/7/realtime-nieuws" target="_blank" class="btn-icon "> <span class="icon-solid--blue icon--small"> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> <svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-322.000000, -576.000000)" fill="#0039D8"> <polygon points="336.702335 576 344 583.510724 336.723174 591 336.020839 590.279327 342.121 584 322 584 322 583 342.101 583 336 576.720673"> </polygon> </g> </g> </svg> </span> <span class="btn-icon__text">Aanmelden</span> </a> </div> </div> </div> </article>

Kennis - Table

Color scheme: Blue & White

95 procent

van Nederlands media bouwt op het ANP

100 miljoen

foto's staan in de database van het ANP

250 nieuwsberichten

zijn dagelijks te gebruiken

600 fotografen

uit Nederland leveren aan het ANP



<article class="blocks combi:white"> <div class="block table-block block--medium"> <div class="table-block__grid"> <div class="table-block__item"> <h4 class="table-block__title">95 procent</h4> <p class="table-block__info">van Nederlands media bouwt op het ANP</p> </div> <div class="table-block__item"> <h4 class="table-block__title">100 miljoen</h4> <p class="table-block__info">foto's staan in de database van het ANP</p> </div> <div class="table-block__item"> <h4 class="table-block__title">250 nieuwsberichten</h4> <p class="table-block__info">zijn dagelijks te gebruiken</p> </div> <div class="table-block__item"> <h4 class="table-block__title">600 fotografen</h4> <p class="table-block__info">uit Nederland leveren aan het ANP</p> </div> </div> </div> </article>