Skip to content

Property

Use property element to indicate a key value text element on a page. It is used in product_codes module.

Structurally .property contains following elements:

  • .property__key
  • .property__value

Example

Here is an example of property element usage.

HTML
<p class="property">
    <span class="property__key">Key</span>
    <span class="property__value">Value</span>
</p>

Property tags

The .property classes were designed to be used with block elements like <p>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any property less variable in your User Less section to change property styles.

Property variables

Variables used to style a property.

@propertyColor: @globalFontColorSecondary;

If you want to change labeled icon styles, you can just change the variables. To change default color just modify @propertyColor variable.

@propertyColor: red;

Property standard styles

Here are standard property styles.

.property {
    .size-xs();

    color: @propertyColor;

    &__value {
        .weight-semibold();
    }
}

Modules reference