search

slidersSetting 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.

hashtag
Line 1: Your Google Font

GroundworkUI UI Kits use Google Fonts, and the first line that you copy into your website looks like this:

This code allows your website or webpage to use the font you've chosen.

hashtag
Line 2: Your UI Kit CSS

The second line that you copy into your website looks like this

This line of code contains all the CSS that you need to use your UI Kit.

PreviousPublishingNextUsing your UI Kit

Last updated