HTML Classes & IDs

HTML attributes that trigger Grow functions.

Grow has a widget interface that lets readers log in, sign up, and interact with content on a site. If you’d like to offer your own controls that trigger Grow functionality, refer to the following classes and IDs that are available.

Important

If a reader is already logged in, using the login and signup classes and IDs will redirect them to their Grow Bookmarks page.

Classes

grow-bookmarks-open

Displays the Grow Bookmarks user interface. Add grow-bookmarks-open as a class attribute to an HTML element.

Note

If a reader is not logged in, their Grow Bookmarks page will be empty and they will be prompted to sign in or log in.

Example:

<button class="grow-bookmarks-open" type="button">
  Open Grow Bookmarks
</button>

Try It Out:

The button below will open the Grow Bookmarks page. Make sure you’re logged in to Grow to see the button work properly. If you’re not logged in, you’ll see the Grow Log In page.

Displays the Grow Login form. Add grow-login as a class attribute to an HTML element.

Note

If a reader is already logged in to Grow, their Grow Bookmarks page will be shown.

Example:

<button class="grow-login" type="button">
  Grow Login
</button>

Try It Out:

The button below will show the Grow Login form. Make sure to log out of Grow to see the button work properly.

Displays the Grow Sign Up form. Add grow-sign-up as a class attribute to an HTML element.

Note

If a reader is already logged in to Grow, their Grow Bookmarks page will be shown.

Example:

<button class="grow-sign-up" type="button">
  Grow Sign Up
</button>

Try It Out:

The button below will show the Grow Sign Up form. Make sure to log out of Grow to see the button work properly.

IDs

#growlogin

Opens the Grow Login form. Add #growlogin to the href attribute of an anchor element.

Note

If a reader is already logged in to Grow, their Grow Bookmarks page will be shown.

Example:

<a href="#growlogin">
  Login to Grow
</a>

Try It Out:

The link below will show the Grow Login form. Make sure to log out of Grow to see the button work properly.

#growsignup

Opens the Grow Sign Up form. Add #growsignup to the href attribute of an anchor element.

Note

If a reader is already logged in to Grow, their Grow Bookmarks page will be shown.

Example:

<a href="#growsignup">
  Sign Up for Grow
</a>

Try It Out:

The link below will show the Grow Sign Up form. Make sure to log out of Grow to see the button work properly.