UCI

Table: Label M 

<div class="table">
    <div class="table__head">
        <div class="table__title">
            <h3 class="
                        title-m
                        
                        
                        
                        
                    ">UCI Key Ratings</h3>
        </div>
    </div>
    <div class="table__content table__content_col_3" id="exampleTable">
        <table>
            <thead>
                <tr>
                    <th>
                        <div class="text-label-m"></div>
                    </th>
                    <th>
                        <div class="text-label-m">Compraventa</div>
                    </th>
                    <th>
                        <div class="text-label-m">Hipoteca</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            Impuestos
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            12.600€
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            12.600€
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            Notario
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            750€
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            750€
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            Registro
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            400€
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            400€
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            Gestoria
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            431€
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            249€
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            Total
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            14.181€
                        </div>
                    </td>
                    <td>
                        <div class="
    bodycopy-m
    
    
    
">
                            249,56€
                        </div>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <div id="" class="
    bodycopy-l
    
    
    
">Gastos totales</div>
                    </td>
                    <td>
                        <div id="" class="
    bodycopy-l
    
    
    
"></div>
                    </td>
                    <td>
                        <div id="" class="
    bodycopy-l
    
    
    
">14.532€</div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
 
<div class="table">
    {{#if title}}
        <div class="table__head">
            <div class="table__title">
                {{> @title-m title }}
            </div>
        </div>
    {{/if}}
    <div class="table__content {{#if is5Cols}}table__content_col_5{{else}}table__content_col_3{{/if}}" id="exampleTable">
        <table>
            <thead>
                <tr{{#if isSecondaryBrandBG}} class="secondaryBrandBG"{{/if}}>
                    {{#each header-cell}}
                        <th>{{#if isLabelM}}{{> @text-label-m this }}{{else}}{{> @text-label-s this }}{{/if}}{{#if href}}<a href="{{{href}}}"{{#if target}} target="{{{target}}}{{/if}}">{{> @icon icon }}</a>{{/if}}</th>
                    {{/each}}
                </tr>
            </thead>
            <tbody>
                {{#each body-row}}
                    <tr>
                        {{#each this}}
                            <td{{#if isAccentLightBG}} class="accentLightBG"{{/if}}>{{#if isBodycopyS}}{{> @bodycopy-s this }}{{else}}{{> @bodycopy-m this }}{{/if}}</td>
                        {{/each}}
                    </tr>
                {{/each}}
            </tbody>
            <tfoot>
                <tr>
                    {{#each footer-cell}}
                        <td>{{> @bodycopy-l this }}</td>
                    {{/each}}
                </tr>
            </tfoot>
        </table>
    </div>
</div>
 
{
  "title": {
    "text": "UCI Key Ratings"
  },
  "header-cell": [
    {
      "isLabelM": true,
      "text": ""
    },
    {
      "isLabelM": true,
      "text": "Compraventa"
    },
    {
      "isLabelM": true,
      "text": "Hipoteca"
    }
  ],
  "body-row": [
    [
      {
        "text": "Impuestos"
      },
      {
        "text": "12.600€"
      },
      {
        "text": "12.600€"
      }
    ],
    [
      {
        "text": "Notario"
      },
      {
        "text": "750€"
      },
      {
        "text": "750€"
      }
    ],
    [
      {
        "text": "Registro"
      },
      {
        "text": "400€"
      },
      {
        "text": "400€"
      }
    ],
    [
      {
        "text": "Gestoria"
      },
      {
        "text": "431€"
      },
      {
        "text": "249€"
      }
    ],
    [
      {
        "text": "Total"
      },
      {
        "text": "14.181€"
      },
      {
        "text": "249,56€"
      }
    ]
  ],
  "footer-cell": [
    {
      "text": "Gastos totales"
    },
    {
      "text": ""
    },
    {
      "text": "14.532€"
    }
  ]
}
  • Content: 
    .table {
    &__head {
        margin-bottom: 60px;
    }

    &__content {
        @media (--viewport-ms-max) {
            padding-bottom: 35px;
        }

        &_col {
            &_1 {
                th,
                td {
                    width: 100%;
                    min-width: 700px;
                }
            }

            &_2 {
                th,
                td {
                    width: 50%;
                    min-width: 350px;
                }
            }

            &_3 {
                th,
                td {
                    width: 33.333333333%;
                    min-width: 233.333333333px;
                }
            }

            &_4 {
                th,
                td {
                    width: 25%;
                    min-width: 256px;
                }
            }

            &_5 {
                th,
                td {
                    width: 20%;
                    min-width: 204.8px;
                }
            }

            &_6 {
                th,
                td {
                    width: 16.666666667%;
                    min-width: 170.666666667px;
                }
            }

            &_7 {
                th,
                td {
                    width: 14.285714286%;
                    min-width: 146.285714286px;
                }
            }

            &_8 {
                th,
                td {
                    width: 12.5%;
                    min-width: 128px;
                }
            }

            &_9 {
                th,
                td {
                    width: 11.111111111%;
                    min-width: 113.777777778px;
                }
            }

            &_10 {
                th,
                td {
                    width: 10%;
                    min-width: 102.4px;
                }
            }
        }

        table {
            width: 100%;
            max-width: 100%;
            border-collapse: collapse;
            background-color: transparent;

            thead {
                vertical-align: middle;

                tr{
                    th {
                        vertical-align: top;
                        padding-bottom: 15px;
                        text-align: right;
    
                        &:first-child {
                            text-align: left;
                        }
    
                        .text-label-m, .text-label-s{display: inline;}
                        .icon{bottom: -2px; position: relative;}
                    }

                    &.secondaryBrandBG{
                        background-color: var(--color-secondary-brand);
                        color: var(--color-white);
                        .text-label-m, .text-label-s{color: var(--color-white);}
                        .icon{fill: var(--color-white);}
                        th{padding-top: 15px;}
                    }
                }

            }

            tbody {
                tr {
                    border-top: 1px solid var(--color-secondary-light);

                    &:first-child {
                        border-top: 2px solid var(--color-secondary);
                    }

                    &:last-child {
                        border-bottom: 2px solid var(--color-secondary);
                    }
                }
            }

            td {
                vertical-align: top;
                padding: 20px 0;
                text-align: right;

                &:first-child {
                    text-align: left;
                }

                &.accentLightBG{
                    background-color: var(--color-accent-light);
                    border-top: solid 1.5px var(--color-secondary-brand);
                }
            }
        }
    }
}
  • URL: /components/raw/table/table.css
  • Filesystem Path: src/02-molecules/table/table.css
  • Size: 3.8 KB

No notes defined.