Setting up your UI Kit
After you've published your UI Kit, all you need to do to set it up for use in your website, is copy and paste your "Embed code" into the head of your website or webpage.
Your embed code becomes available once you publish your UI Kit for your deployment environment.
Your embed code will look something like this:
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://www.groundworkui.com/embed/158ca12c6f746cfc445cad4367ef02b3.css" rel="stylesheet" type="text/css">To set up your UI Kit, copy this code and paste it into the headtag of your webpage. When it's done, your code should look something like this:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://www.groundworkui.com/embed/158ca12c6f746cfc445cad4367ef02b3.css" rel="stylesheet" type="text/css">
...
</head>
<body>
...
</body>
</html>And that's it! If you're curious what those two lines of code are, you can read on. Otherwise, you can skip ahead to Using your UI Kit.
One thing to note before we move on, you only have to embed your code once. If you publish a future version of your UI Kit, your embed code will live update with the latest changes.
Line 1: Your Google Font
GroundworkUI UI Kits use Google Fonts, and the first line that you copy into your website looks like this:
<link href="https://fonts.googleapis.com/css2?family=[YOUR FONT HERE]:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">This code allows your website or webpage to use the font you've chosen.
Line 2: Your UI Kit CSS
The second line that you copy into your website looks like this
<link href="https://www.groundworkui.com/embed/158ca12c6f746cfc445cad4367ef02b3.css" rel="stylesheet" type="text/css">This line of code contains all the CSS that you need to use your UI Kit.
Last updated