Back to overview

Boxes and lines

Boxes

Boxes are used to group special content elements - like teasers or navigational boxes. Content that needs to be especially highlighted – like the contact teaser, promotional teasers – are used boxes with gradients.

TypeBorderBackground
Teaser box with gradient1 pixel; color #ccd0d2gradient from #eceff2 to #ffffff
Teaser box, white1 pixel; color #ccd0d2#ffffff (white)
Teaser box with background1 pixel; #ffffff (white)#eceff2
Background (e.g. search input) #e1e5e9

Lines

Lines are used for many different purposes such as dividing content elements (e.g. in forms or link lists), as outline for teaser boxes, for the subdivision in tables and so on. The width or height depends on the grid and on the height of the content.

TypeProperties
Standard line with gradient1 px border; gradient from #e1e5e9 to #ccd0d2
Vertical line1 px border; vertical; color #ccd0d2
Outline for teaser boxes1 px border; color #ccd0d2

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines