/
Links

Links

There are three styles for links.

Warning: Styling mentioned on this page is limited. Please refer to https://styleguide.asce.org/section-components.html#asgref-components-links for a more comprehensive representation.

Standard Link

Default State

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

Property

Value

Note

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

Property

Value

Note

opacity

0.5

50% opacity


Arrow Link

Default State

Property

Value

Note

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

Property

Value

Note

color

rgb(5, 155, 214)

Blue tint 1

Altered State - :disabled

Property

Value

Note

Property

Value

Note

opacity

0.5

50% opacity


Arrow Link - White

Default State

Property

Value

Note

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

Property

Value

Note

color

rgb(255, 255, 255)

White

Altered State - :disabled

Property

Value

Note

Property

Value

Note

opacity

0.5

50% opacity

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

 

Related content

Buttons
More like this
Link List
More like this
Institute Link List
Institute Link List
More like this
Intro Panel
More like this
CTA Panel
More like this
Image Slider
More like this