Corncob Design Language

Links

Links are used to navigate between pages or sections of a website. They can be styled in various ways to indicate their purpose and importance.

Basic Link

The most basic link is created using the <a> tag. It can be styled with CSS to change its appearance. Here’s an example of a basic link:

Visit Example

<a href="https://www.example.com">Visit Example</a>

Stand-alone Link

A stand-alone link is a link that is not part of a larger block of text. It can be styled to look like a button or other interactive element. Here’s an example of a stand-alone link: Add the corn-link class to the <a> tag to apply the link styles.

Forgot Username or Password?

Create a new account

<div>
  <a href="#example-link" class="corn-link">
    Forgot Username or Password?
  </a>
</div>

<div>
  <a href="#example-link" class="corn-link">
    Create a new account
  </a>
</div>

Link Tokens

:root {
  --cc-link--transition--timing: 150ms;
  --cc-link--font--weight: var(--cc-body--font--weight--normal);
  --cc-link--font--weight--bold: var(--cc-body--font--weight--bold);
  --cc-link--font--family: var(--cc-body--font--family);
  --cc-link--color--border: transparent;
  --cc-link--width--border: 1px;
  --cc-link--style--border: solid;
  --cc-link--color--text: var(--cc-blue-60);
  --cc-link--color--text--hover: var(--cc-blue-70);
  --cc-link--color--border--hover: var(--cc-blue-70);
  --cc-link--color--text--active: var(--cc-blue-80);
  --cc-link--color--border--active: var(--cc-blue-80);
  --cc-link--color--text--focus: var(--cc-blue-60);
  --cc-link--color--border--focus: var(--cc-blue-50);
  --cc-link--underline--color--border: var(--cc-blue-50);
  --cc-link--underline--style--border: solid;
  --cc-link--underline--width--border: 1px;
  --cc-link--underline--color--border--hover: var(--cc-blue-50);
  --cc-link--underline--color--border--active: var(--cc-blue-50);
  --cc-link--underline--color--border--focus: var(--cc-blue-50);
  --cc-link--underline--color--text: var(--cc-gray-80);
  --cc-link--underline--width--border--focus: 1px;
  --cc-link--underline--width--border--active: var(--cc-link--underline--width--border);
  --cc-link--underline--color--text--hover: var(--cc-gray-90);
  --cc-link--underline--color--text--active: var(--cc-black);
  --cc-link--underline--box-shadow--hover: 0 2px 2px -2px var(--cc-blue-60);
  --cc-link--underline--box-shadow--focus: 0 2px 2px -2px var(--cc-blue-80);
  --cc-link--underline--box-shadow--active: none;
}