Label Value Pair

Displays a labeled value with various options to format the display of the value. The value can either be provided as is or using content projection.

Show visual guide (only part of this demo)

Default

<bci-label-value-pair label="My bold very very very long Label" value="My bold very very very long Value"></bci-label-value-pair>

Other Examples



Projected content

The label value pair component uses Angular Content projection to give you the possibility to decide what you would like to insert (or project) into the label value pair component.

Projected content
My favorite icons can be placed here

<bci-label-value-pair label="Regular label" boldLabel="false"> <div>Projected content</div> </bci-label-value-pair>

Projected content

Word wrap


Right aligned


Truncated at the beginning