UCI

Description list: Text List 

<section class="splitter  splitter_bg-color_white            ">
    <div class="container">
        <div class="splitter__wrapper">
            <div class="row">
                <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                    <div class="description-list text-list">

                        <dl>
                            <div class="wrap">
                                <dt class="ok" id=""><svg class="icon icon-16_feedback-success     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
                                    </svg>
                                    <span class="bodycopy-m">Titulares:</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                                </dt>
                                <dd class="" id=""><span class="bodycopy-m">El límite de titulares para acceder al aval es hasta dos titulares.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
                            </div>
                            <div class="wrap">
                                <dt class="ko" id=""><svg class="icon icon-16_feedback-error     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-error"></use>
                                    </svg>
                                    <span class="bodycopy-m">Edad y menores a cargo:</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                                </dt>
                                <dd class="" id=""><span class="bodycopy-m">Debes tener 35 años o menos, ser mayor de edad o tener hijos a tu cargo, en cuyo caso no importa la edad.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
                            </div>
                            <div class="wrap">
                                <dt class="ok" id=""><svg class="icon icon-16_feedback-success     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
                                    </svg>
                                    <span class="bodycopy-m">Límite de ingresos:</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                                </dt>
                                <dd class="" id=""><span class="bodycopy-m">El patrimonio no debe exceder los 100.000 €.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
                            </div>
                            <div class="wrap">
                                <dt class="ok" id=""><svg class="icon icon-16_feedback-success     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
                                    </svg>
                                    <span class="bodycopy-m">Primera vivienda:</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                                </dt>
                                <dd class="" id=""><span class="bodycopy-m">La vivienda que vas a a adquirir debe ser tu primera vivienda, excepto en casos de herencias parciales, divorcio o inaccesibilidad de la vivienda actual debido a discapacidad. No eres propietario de otra vivienda. No se podrá hacer uso de la vivienda para el ejercicio de una actividad económica).</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
                            </div>
                            <div class="wrap">
                                <dt class="ok" id=""><svg class="icon icon-16_feedback-success     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
                                    </svg>
                                    <span class="bodycopy-m">Residencia legal:</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                                </dt>
                                <dd class="" id=""><span class="bodycopy-m">Debes cumplir la antigüedad de 2 años en residencia española.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#if splitter}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="description-list{{#if isTextList}} text-list{{/if}}">
  {{#if title}}
  {{> @title title }}
  {{else if titulo}}
  <h3>{{> @text-label-m titulo }}</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
  {{/if}}
  {{#if description}}<div class="description">{{> @bodycopy description}}</div>{{/if}}
  <dl>
    {{#each row}}
    {{#if isTextList}}<div class="wrap">{{/if}}
      <dt class="{{ extra-classes-dt }}" id="{{ id-dt }}">{{#if icon}}{{> @icon icon }}{{/if}}{{> @bodycopy item }}</dt>
      <dd class="{{ extra-classes-dd }}" id="{{ id-dd }}">{{> @bodycopy description }}</dd>
      {{#if isTextList}}
    </div>{{/if}}
    {{/each}}
  </dl>
</div>
{{/content}}
{{/extend}}
{{else}}
<div class="description-list{{#if isTextList}} text-list{{/if}}">
  {{#if title}}
  {{> @title title }}
  {{else if titulo}}
  <h3>{{> @text-label-m titulo }}</h3> <!-- en los cambios propuestos en 05/2023 el átomo pasa de ser s a m -->
  {{/if}}
  {{#if description}}<div class="description">{{> @bodycopy description}}</div>{{/if}}
  <dl>
    {{#each row}}
    {{#if isTextList}}<div class="wrap">{{/if}}
      <dt class="{{ extra-classes-dt }}" id="{{ id-dt }}">{{#if icon}}{{> @icon icon }}{{/if}}{{> @bodycopy item }}</dt>
      <dd class="{{ extra-classes-dd }}" id="{{ id-dd }}">{{> @bodycopy description }}</dd>
      {{#if isTextList}}
    </div>{{/if}}
    {{/each}}
  </dl>
</div>
{{/if}}
 
{
  "titulo": false,
  "row": [
    {
      "isTextList": true,
      "extra-classes-dt": "ok",
      "icon": {
        "name": "16_feedback-success"
      },
      "item": {
        "text": "Titulares:",
        "strong": true,
        "type": "-m"
      },
      "description": {
        "text": "El límite de titulares para acceder al aval es hasta dos titulares.",
        "type": "-m"
      }
    },
    {
      "isTextList": true,
      "extra-classes-dt": "ko",
      "icon": {
        "name": "16_feedback-error"
      },
      "item": {
        "text": "Edad y menores a cargo:",
        "strong": true,
        "type": "-m"
      },
      "description": {
        "text": "Debes tener 35 años o menos, ser mayor de edad o tener hijos a tu cargo, en cuyo caso no importa la edad.",
        "type": "-m"
      }
    },
    {
      "isTextList": true,
      "extra-classes-dt": "ok",
      "icon": {
        "name": "16_feedback-success"
      },
      "item": {
        "text": "Límite de ingresos:",
        "strong": true,
        "type": "-m"
      },
      "description": {
        "text": "El patrimonio no debe exceder los 100.000 €.",
        "type": "-m"
      }
    },
    {
      "isTextList": true,
      "extra-classes-dt": "ok",
      "icon": {
        "name": "16_feedback-success"
      },
      "item": {
        "text": "Primera vivienda:",
        "strong": true,
        "type": "-m"
      },
      "description": {
        "text": "La vivienda que vas a a adquirir debe ser tu primera vivienda, excepto en casos de herencias parciales, divorcio o inaccesibilidad de la vivienda actual debido a discapacidad. No eres propietario de otra vivienda. No se podrá hacer uso de la vivienda para el ejercicio de una actividad económica).",
        "type": "-m"
      }
    },
    {
      "isTextList": true,
      "extra-classes-dt": "ok",
      "icon": {
        "name": "16_feedback-success"
      },
      "item": {
        "text": "Residencia legal:",
        "strong": true,
        "type": "-m"
      },
      "description": {
        "text": "Debes cumplir la antigüedad de 2 años en residencia española.",
        "type": "-m"
      }
    }
  ],
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true
  },
  "isTextList": true
}
  • Content: 
    .description-list {
    .text-label-m{text-align: left;padding:0 10px;}
    dl{display: flex; flex-direction:row; width: 100%; flex-wrap:wrap;margin-top: 0;
        dt{border-bottom: solid 1px var(--color-border-accent-bold); width: 70%;padding: 15px 10px 7px 20px; text-align: left;
            .bodycopy-m{color: var(--color-text);overflow-wrap: break-word;}
            .bodycopy-l{color: var(--color-text);overflow-wrap: break-word; font-weight: bold;}
            &.total{border-bottom: 0;background-color: var(--color-background-accent);}
            @media (--viewport-sm-max){width: 60%;}
        }
        dd{border-bottom: solid 1px var(--color-border-accent-bold); width: 30%; margin: 0;padding: 15px 20px 7px 10px; text-align: right;
            .bodycopy-m{color: var(--color-text); font-weight: bold;}
            .bodycopy-l{color: var(--color-text); font-weight: bold;}
            &.total{border-bottom: 0;background-color: var(--color-background-accent);}
            @media (--viewport-sm-max){width: 40%;}
            &.grey{color: var(--color-grey2);
                .bodycopy-m{color: var(--color-grey2);}
            }
        }
    }
    @media (--viewport-sm-max){
        &:nth-of-type(1n) {
            margin-top: 30px;
        }
    }

    &.text-list{
        .description{
            margin: 32px 0;
        }
        dl{
            .wrap{display: flex; width: 100%; align-items: flex-start;column-gap:16px; margin-bottom: 24px;
                
                dt{border-bottom: none; width:fit-content;padding: 0; text-align: left;float:left; clear: left;white-space:nowrap;
                    .bodycopy-m{color: var(--color-text);overflow-wrap:normal;font-weight: bold; white-space:nowrap;}
                    &.ok{
                        .icon{
                            fill:var(--color-icon-success);
                            margin-right: 16px;
                        }
                    }
                    &.ko{
                        .icon{
                            fill:var(--color-icon-error);
                            margin-right: 16px;
                        }
                    }
                    
                }
                dd{border-bottom: none; width: auto; margin: 0;text-align: left;padding: 0;float:left;
                    .bodycopy-m{color: var(--color-text); font-weight: normal;color: var(--color-text-subtle);}
                }
                @media (--viewport-xs-max){
                    display: block;
                    dt, dd{width: 100%;}
                }
            }
        }
    }
}
  • URL: /components/raw/description-list/description-list.css
  • Filesystem Path: src/02-molecules/description-list/description-list.css
  • Size: 2.6 KB

No notes defined.