<!-- FIELDSET Component -->
<fieldset class="kx-fieldset">
    <!-- LEGEND Component -->
    <legend class="kx-legend kx-legend--underline">Legend text with underline</legend>
    <div class="kx-fieldset__content">
        <p>
            This segment will be overwritten when component is called/ embedded. Please have a look at <a href="/components/detail/legend">legend</a> for details of different variants.
        </p>
        <p>Some additional text</p>
    </div>
</fieldset>
<!-- FIELDSET Component -->
<fieldset class="kx-fieldset{% for class in classes %} {{ class }}{% endfor %}">
    {% render '@legend', legendContext, true -%}
    <div class="kx-fieldset__content">
        {{ content }}
        {%- block form_blocks -%}
        <p>
            This segment will be overwritten when component is called/ embedded.
            Please have a look at <a href="/components/detail/legend">legend</a>
            for details of different variants.
        </p>
        {% endblock -%}
        {% if fieldsetText -%}
        <p>{{ fieldsetText }}</p>
        {% endif -%}
    </div>
</fieldset>
{
  "classes": null,
  "legendContext": {
    "class": null,
    "legendText": "Legend text with underline",
    "renderAsLabel": null,
    "hideLegend": null,
    "underline": true
  },
  "fieldsetText": "Some additional text"
}
  • Content:
    // ==========================================================================
    // Component: fieldset
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    // Block (parent)
    // ==========================================================================
    
    .kx-fieldset {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    
  • URL: /components/raw/fieldset/_fieldset.scss
  • Filesystem Path: src\components\01-form\fieldset\_fieldset.scss
  • Size: 459 Bytes

There are no notes for this item.