You are viewing version 6.0.0 of the library, the latest version is

Anchors

<section class="text-section">
    <h1>Header link:</h1>
    <a href="">
        <h1>H1 anchor default</h1>
    </a>
    <a href="">
        <h2>H2 anchor default</h2>
    </a>
    <a href="">
        <h3>H3 anchor default</h3>
    </a>
    <a href="">
        <h4>H4 anchor default</h4>
    </a>
    <a href="" style="background: black; display: block;">
        <h5>H5 anchor default</h5>
    </a>
    <a href="">
        <h6>H6 anchor default</h6>
    </a>
</section>
<br /><br />
<section class="text-section">
    <h1>Text link:</h1>
    <p>
        <a href="">Normal text link</a>
    </p>
    <p>
        <a href="" class="no-underline">Text link with class "no-underline"</a>
    </p>
</section>
<br /><br />
<section class="text-section">
    <h1>
        Example on how a link looks like in a text:
    </h1>
    <p>
        Sociosqu eu pharetra dignissim tellus finibus. Ad facilisi dapibus orci etiam iaculis phasellus massa nisi
        penatibus.
        Sagittis viverra iaculis velit venenatis vestibulum lobortis condimentum nec. Taciti venenatis parturient
        senectus
        ligula laoreet tortor. Mus mauris nam consectetur magna maximus tempor molestie lacus. Maecenas in pede proin
        adipiscing
        sem congue suscipit. <a href="">Feugiat blandit</a> dis tristique litora. Non integer ad urna netus risus in
        pretium. Id per
        justo
        tristique ipsum parturient auctor. Augue primis est habitant facilisi blandit mi lorem lobortis. Integer ante
        morbi
        fringilla ullamcorper platea arcu <a href="">consectetuer</a> eu per. Euismod himenaeos elit habitant neque
        aenean commodo
        inceptos
        phasellus. Sociosqu tortor sagittis odio montes a mi vel nisl ornare. Netus fames risus ut montes. Tempor augue
        mauris
        luctus tortor aenean pellentesque.
    </p>
    <p>
        Leo <a href="">ridiculus</a> dictum ac imperdiet ad sociosqu risus senectus. <a href="">Si natoque neque
            suscipit nisi erat leo.</a> Sit
        eleifend dis
        luctus nibh pede lacus neque in dolor.
    </p>
    <p>
        Congue vulputate lectus ad cursus finibus dolor. Facilisis aenean quis urna elit. Porta elit montes felis tellus
        quisque
        vehicula per convallis placerat. Sodales torquent commodo vehicula platea pharetra. Platea luctus lorem magnis
        porta
        pede.
    </p>
</section>

Anchors

The designers style guide (built by Stroomt) has a typography section with specific typography styling for Nijmegen.

The custom anchors, as defined in the style guide, can be seen in the preview panel.

Using

Place text that can contain links in a container with the class text-section. This ensures that the links will be underlined.

Links that are not placed in the “text-section” container won’t be underlined but will change color slightly on focus/active/hover.