Skip to end of banner Go to start of banner

Links

Skip to end of metadata

Created by Hodges, David, last modified on Nov 04, 2021

Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

There are three styles for links.

Standard Link

Default State

Property	Value	Note
`color`	`#0273ba`	Blue
`border-bottom`	`2px solid rgba(5, 155, 214, 0.5)`	Blue tint 1 with 50% opacity

Altered States - `:hover`, `:focus`, and `:active`

Property	Value	Note
`color`	`#059bd6`	Blue tint 1
`border-color`	`rgba(5, 155, 214, 0.5)`	Blue tint 1 with 50% opacity
`box-shadow`	`0 2px 0 rgb(5 155 214 / 50%)`	Blue tint 1 with 50% opacity

Altered State - `:disabled`

Property	Value	Note
`opacity`	`0.5`	50% opacity

Arrow Link

Default State

Property	Value	Note
`padding-left`	`28px`
`color`	`#253a6e`	Blue shade 1
`font-size`	`1.125rem`
`font-weight`	`700`

Altered States - `:hover`, `:focus`, and `:active`

Property	Value	Note
`color`	`rgb(5, 155, 214)`	Blue tint 1

Altered State - `:disabled`

Property	Value	Note
`opacity`	`0.5`	50% opacity

Arrow Link - White

Default State

Property	Value	Note
`padding-left`	`28px`
`color`	`#ffffff`	White
`font-size`	`1.125rem`
`font-weight`	`700`

Altered States - `:hover`, `:focus`, and `:active`

Property	Value	Note
`color`	`rgb(255, 255, 255)`	White

Altered State - `:disabled`

Property	Value	Note
`opacity`	`0.5`	50% opacity

https://styleguide.asce.org/section-components.html#asgref-components-links

No labels