Link
SCSS Source: core/src/scss/components/link/_link.scss
Twig Source: core/src/templates/components/link/link.twig
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>