Foundations

<div class="nijmegen-theme">
    <h4>Colors</h4>
    <span style="color: var(--nijmegen-color-rood-700);">Nijmegen red color</span>
    <br><span style="color: var(--nijmegen-color-zeegroen-600);">Nijmegen green color</span>
    <br><a class="utrecht-link utrecht-link--html-a" href="https://gemeentenijmegen.github.io/design-system/?path=/docs/foundations-colors-documentatie--docs" target="_blank">See all color variables</a>
    <hr>
    <h4>Icons</h4>
    <p>For the functional and alert icons the Tabler icons are used. While it is recommended to use the Tabler icons for
        functional icons, users can choose alternative icons if a suitable option within the Tabler icons is not
        available. For task specific icons you can use the line iconset of OpenGemeente.</p>
    <h6>Tabler icon example</h6>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 12l14 0" />
        <path d="M13 18l6 -6" />
        <path d="M13 6l6 6" />
    </svg>
    <h6>OpenGemeenten Icon example</h6>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="currentColor" stroke="currentColor">
        <path d="M29 34c0-.55.45-1 1-1h2c.55 0 1 .45 1 1s-.45 1-1 1h-2c-.55 0-1-.45-1-1Zm-6-5h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm0-6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm7 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm0 6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm-14 6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm0-12h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm0 6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1Zm6.7 7.46c.37.32.93.31 1.29-.02l3.22-2.94c.41-.37.42-1.01.03-1.41-.38-.38-1-.38-1.38 0l-2.5 2.5-.73-.73a.966.966 0 0 0-1.37 0c-.4.39-.37 1.04.05 1.4l1.39 1.19ZM37.02 8h-5V6.99c0-.55-.44-.99-.99-.99H31c-.55 0-.99.44-.99.99V11c0 .55.45 1 1 1s1-.45 1-1v-1h5v4H11.03v-4h1.99c.55 0 1-.45 1-1s-.45-1-1-1h-2c-1.11 0-2 .89-2 1.99L9 38.02c0 2.2 1.78 3.99 3.98 3.99h22.04c2.21 0 4-1.79 4-4V10c0-1.1-.9-2-2-2ZM13.01 40c-1.1 0-1.99-.89-1.99-1.99V16h26v22c0 1.1-.9 2-2 2H13.01Zm3.02-29c0 .55.45 1 1 1s1-.45 1-1v-1h9c.55 0 1-.45 1-1s-.45-1-1-1h-9V6.99c0-.55-.44-.99-.99-.99s-.99.44-.99.99V8h-.02v3Z" />
    </svg>
    <br><a class="utrecht-link utrecht-link--html-a" href="https://gemeentenijmegen.github.io/design-system/?path=/docs/foundations-icons-developer-documentation--docs" target="_blank">See full Icon documentation</a>
    <hr>
    <h4>Layout</h4>
    We provide css layout options for responsive containers, grid and spacing.

    <h6 class="nijmegen-margin-block-start-100">Container with responsive grid example</h6>
    <div class="nijmegen-container">
        <div class="nijmegen-grid">
            <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
            <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
            <div class="nijmegen-g-col-6 nijmegen-g-col-md-4">.nijmegen-g-col-6 .nijmegen-g-col-md-4</div>
        </div>
    </div>
    <h6 class="nijmegen-margin-block-start-100">Spacing example</h6>
    <div class="nijmegen-margin-inline-start-25">start 0.25rem margin</div>
    <div class="nijmegen-padding-inline-500">horizontal 5rem padding</div>
    <div class="nijmegen-margin-block-end-75">vertical end 0.75rem margin</div>
    <div class="nijmegen-margin-block-300">vertical 3rem margin</div>
    <a class="utrecht-link utrecht-link--html-a" href="https://gemeentenijmegen.github.io/design-system/?path=/docs/foundations-layout-developer-documentation--docs" target="_blank">See full Layout documentation</a>
</div>