Links

Owned by Hodges, David
Last updated: Dec 08, 2021
1 min read

There are three styles for links.

Warning: Styling mentioned on this page is limited. Please refer to ASCE Digital Style Guide for a more comprehensive representation.

1 Standard Link | 1.1 Default State | 1.2 Altered States - :hover, :focus, and :active | 1.3 Altered State - :disabled | 2 Arrow Link | 2.1 Default State | 2.2 Altered States - :hover, :focus, and :active | 2.3 Altered State - :disabled | 3 Arrow Link - White | 3.1 Default State | 3.2 Altered States - :hover, :focus, and :active | 3.3 Altered State - :disabled

Standard Link

Default State

Property

Value

Note

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

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

ASCE Digital Style Guide