Legend: As label and underline 

<!-- LEGEND Component -->
<legend class="kx-label kx-legend--underline">This is a legend rendered as a label</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 rendered as a label",
  "renderAsLabel": true,
  "underline": true,
  "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.