<div class="u-wrapper d-h2">
    <div class="u-container">
        <div class="d-margin-intro-3xl">
            <div class="m-alert" role="alertdialog" aria-labelledby="moved-alert">
                <h4 id="moved-alert" class="h5 u-margin-bottom-xs">We've moved!</h4>
                <p>This page only contains code examples. For a complete overview of components, UX patterns and accessibility guidelines, please visit our <a href="https://digitalehuisstijl.antwerpen.be/" title="Antwerp digital branding guidelines" class="has-icon-right" target="_blank">digital branding guidelines portal{{ icon.render('navigation-next') }}<span class="u-screen-reader-only"> (external)</span></a>.
                </p>
            </div>
        </div>
    </div>
	<div class="u-container">
        <p class="u-text-right u-margin-bottom-xs"><a class="has-icon-left" href="https://github.com/a-ui/core_branding_scss">{{ icon.render('developer-community-github-1') }}View the code on GitHub</a></p>
        <p class="u-text-right u-margin-bottom"><a class="has-icon-left" href="#toc">{{ icon.render('list-bullets') }}Skip to table of contents</a></p>
		<h2>Getting started</h2>
	</div>
</div>
<div class="u-wrapper">
    <div class="u-container u-margin-top d-intro">
        <div class="u-margin-bottom-xl">
            <p>In this styleguide you'll find all the necessary info you will need in order to start building digital layouts or apps for the city of Antwerp.</p>

            <h3 class="h5 u-text-bold u-margin-top-xl">Basic implementation</h3>
            <p class="u-margin-top u-margin-bottom-xs">In its simplest - and prefered - form you can just include the following line in the <code>&lt;head&gt;</code> section of your app.</p>
            <pre class="a-pre a-pre--scrollable"><code>&lt;link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/main.min.css"&gt;</code></pre>
            <p class="u-margin-top u-margin-bottom-xs">You can even import it directly in your (S)CSS:</p>
            <pre class="a-pre a-pre--scrollable"><code>@import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/main.min.css");</code></pre>
            <div class="m-alert d-alert u-margin-top">
                <p>We adopt semantic versioning. If you want to use another version of the Core Branding you can do so by adjusting the version in the URL address. See the changelog for all available versions.</p>
            </div>
            <p class="u-margin-top u-margin-bottom-xs">You can also install everything with npm:</p>
            <pre class="a-pre a-pre--scrollable"><code>npm install @a-ui/core --save</code></pre>
            <p class="u-margin-top u-margin-bottom-xs">Then, you can import everything in your Sass setup (<code>main.min.css</code> also available):</p>
            <pre class="a-pre a-pre--scrollable"><code>@import '~@a-ui/core/dist/main.css';</code></pre>
            <p class="u-margin-top u-margin-bottom-xs">In order to extend our style kit you can make use of our Sass variables. Import them like this:</p>
            <pre class="a-pre a-pre--scrollable"><code>@import '~@a-ui/core/dist/assets/styles/_quarks';</code></pre>

            <h3 class="h5 u-text-bold u-margin-top-xl">Advanced usage</h3>
            <p class="u-margin-top u-margin-bottom-xs">Sometimes you want to add functionality which requires more styling as defined in our kit. In order to help with this we provide some simple tools and the ability to import all the kit's Sass variables. See the <a href="#quarks">Quarks</a> section for more info.</p>
            <p class="u-margin-top u-margin-bottom-xs">It's also possible to only load the Antwerp fonts. Just like you would implement a font from Google. These are the links you can use:</p>
            <h4 class="h6 u-text-bold u-margin-top">Antwerpen</h4>
            <p class="u-margin-top-xs u-margin-bottom-xs">Available in Small, Regular and Tall.</p>
            <pre class="a-pre a-pre--scrollable"><code>&lt;link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/antwerpen.min.css"&gt;</code></pre>
            <p class="u-margin-bottom-top-xxs">or</p>
            <pre class="a-pre a-pre--scrollable"><code>@import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/antwerpen.min.css");</code></pre>
            <h4 class="h6 u-text-bold u-margin-top">Sun Antwerpen</h4>
            <p class="u-margin-top-xs u-margin-bottom-xs">Available in Light, Regular, Bold and Extra Bold.</p>
            <pre class="a-pre a-pre--scrollable"><code>&lt;link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/sun-antwerpen.min.css"&gt;</code></pre>
            <p class="u-margin-bottom-top-xxs">or</p>
            <pre class="a-pre a-pre--scrollable"><code>@import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/sun-antwerpen.min.css");</code></pre>

            <h2 class="u-margin-top-xl">Accessibility</h2>
            <p class="u-margin-top u-margin-bottom-xs"><a href="https://www.w3.org/TR/WCAG21/" title="Web Content Accessibility Guidelines (WCAG) 2.1" target="_blank" class="has-icon-right">Web Content Accessibility Guidelines (WCAG) 2.1{{ icon.render('navigation-next') }}<span class="u-screen-reader-only"> (external)</span></a> cover a wide range of recommendations for making web content more accessible.</p>
            <p class="u-margin-top-xs u-margin-bottom-xs">Some parts of the Antwerp branding may need special actions on the subject of WCAG 2.1 AA, specific guidelines that are required by European law. When this is the case you will see this icon <span class="u-text-primary">{{ icon.render('a11y') }}<span class="u-screen-reader-only">accessibility note</span></span> which will warn you about any incompatibilities and actions that may have to be taken from your behalf.</p>

            <h2 class="u-margin-top-xl">Other resources</h2>
            <h3 class="h5 u-text-bold u-margin-top">Flexboxgrid</h3>
            <p class="u-margin-top-xs u-margin-bottom-xs"><a href="https://github.com/a-ui/core_flexboxgrid_scss" title="a-ui/core_flexboxgrid_scss: Grid optimized to follow the Antwerp styling guidelines." target="_blank" class="has-icon-right">https://github.com/a-ui/core_flexboxgrid_scss{{ icon.render('navigation-next') }}<span class="u-screen-reader-only"> (external)</span></a></p>
            <p class="u-margin-bottom">Grid optimized to follow the Antwerp styling guidelines.</p>
            <h3 class="h5 u-text-bold u-margin-top">Sketch</h3>
            <p class="u-margin-top-xs u-margin-bottom-xs"><a href="https://github.com/a-ui/core_branding_sketch" title="a-ui/core_branding_sketch: Sketch source file of all core branding components." target="_blank" class="has-icon-right">https://github.com/a-ui/core_branding_sketch{{ icon.render('navigation-next') }}<span class="u-screen-reader-only"> (external)</span></a></p>
            <p class="u-margin-bottom">Sketch source file of all core branding components.</p>
            <h3 class="h5 u-text-bold u-margin-top">Favicons</h3>
            <p class="u-margin-top-xs u-margin-bottom-xs"><a href="https://github.com/a-ui/core_branding_favicons" title="a-ui/core_branding_favicons: Favicons for Antwerp apps." target="_blank" class="has-icon-right">https://github.com/a-ui/core_branding_favicons{{ icon.render('navigation-next') }}<span class="u-screen-reader-only"> (external)</span></a></p>
            <p class="u-margin-bottom">Favicons for Antwerp apps.</p>
        </div>
    </div>
</div>
