Info Rows

Used for displaying structured or segmented data when you don't to use a table.

This is the label for this row and it's really long

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios.

Dynamically communicate tactical relationships before optimal bandwidth. Professionally exploit high standards in growth strategies through principle-centered methods of empowerment.

This is the label for this row and it's really long

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios.

This label has no value
This row is highlighed

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios. 


<div class="info-rows">

    <div class="info-row">
        <div class="info-row__label">
            <strong>Info Row Label</strong>
        </div>
        <div class="info-row__content">
            Info row content...
        </div>
    </div>
    
    [...]
    
    <div class="info-row info-row--highlight">
        <div class="info-row__label">
            <strong>Empty Info Row</strong>
        </div>
        <div class="info-row__content empty">
        </div>
    </div>
    
</div>

Compact

Info rows can also display in a more compact format.

This is the label for this row and it's really long

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios.

Dynamically communicate tactical relationships before optimal bandwidth. Professionally exploit high standards in growth strategies through principle-centered methods of empowerment.

This is the label for this row and it's really long

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios.

This label has no value
This row is highlighed

Rapidiously evisculate error-free best practices after cross-media schemas. Dramatically generate alternative alignments before maintainable niches. Energistically maximize cross-media resources for high-quality scenarios. 


<div class="info-rows info-rows--compact">

    <div class="info-row">
        <div class="info-row__label">
            <strong>Info Row Label</strong>
        </div>
        <div class="info-row__content">
            Info row content...
        </div>
    </div>
    
    [...]
    
    <div class="info-row info-row--highlight">
        <div class="info-row__label">
            <strong>Empty Info Row</strong>
        </div>
        <div class="info-row__content empty">
        </div>
    </div>
    
</div>

Class Reference

Class Info
info-rows Denotes a group of info rows. Should be added to a div.
info-rows--compact Removes some of the padding from the info rows to make them more compact.
info-row Denotes a single info row. Should be added to a div.
info-row__label Denotes the label container of an info row. Should be added to a div.
info-row__content Denotes the content container of an info row. Should be added to a div. If the div also has an "empty" class, then it will display "n/a".