<!-- LEGEND Component -->
<legend class="kx-legend">This is a Legend</legend>
<!-- LEGEND Component -->
{% if renderAsLabel -%}
<legend class="kx-label{% if underline %} kx-legend--underline{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if hideLegend %} kx-is-vishidden{% endif %}">{{ legendText }}</legend>
{% else -%}
<legend class="kx-legend{% if underline %} kx-legend--underline{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if hideLegend %} kx-is-vishidden{% endif %}">{{ legendText }}</legend>
{% endif -%}
{
  "classes": null,
  "legendText": "This is a Legend",
  "renderAsLabel": null,
  "underline": null,
  "hideLegend": null
}
  • Content:
    // ==========================================================================
    // Component: legend
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    // Block (parent)
    // ==========================================================================
    
    .kx-legend {
        @include type-scale(medium);
        @include type-weight(extra-bold);
        @include type-family(base);
        @include mb(base);
        display: block;
        width: 100%;
    }
    
    // Modifiers
    // ==========================================================================
    
    .kx-legend--underline {
        border-bottom: rem-calc(1) solid $color-legend-border;
        width: 100%;
    }
    
  • URL: /components/raw/legend/_legend.scss
  • Filesystem Path: src\components\01-form\legend\_legend.scss
  • Size: 776 Bytes

There are no notes for this item.