Skip to main content

Main Content

Link

Description

Link styling, with many variants. Default styling refers to inline links, i.e. links embedded within body text.

Default Style

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link [ modifier_class ]">Link text</a>

Style Variants

.su-link--action

Call to action link

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--action">Link text</a>

.su-link--download

Link to download a file

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--download">Link text</a>

.su-link--external

Link to an external site

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--external">Link text</a>

.su-link--internal

Link to an internal (protected) site

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--internal">Link text</a>

.su-link--jump

Jump link (within a page)

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--jump">Link text</a>

.su-link--more

More info link

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--more">Link text</a>

.su-link--video

Link to a video

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-link--video">Link text</a>

.su-button

Button style link

When using this style, please ask yourself, should I use a real button instead?

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-button">Link text</a>

.su-button--secondary

Secondary button style link

When using this style, please ask yourself, should I use a real button instead?

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-button--secondary">Link text</a>

.su-button--big

Big button style link

When using this style, please ask yourself, should I use a real button instead?

Example Markup

<a href="https://decanter.stanford.edu/" class="su-link su-button--big">Link text</a>