UCI

Requirements banner: Two Cols 

<div class="requirements-banner">
    <span class="title-m
            
            
            ">Resumen de requisitos</span>
    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
    <div class="list twocols">
        <ul>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
            <li>
                <svg class="icon icon-bullet-list     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
                </svg>
                <span class="bodycopy-m">POR LO QUE PUEDA PASAR</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
        </ul>
    </div>
    <a class="link
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                " href="#">
        <span>Ver todos los requisitos</span>
    </a>

</div>
 
<div class="requirements-banner">
    {{#if title}}
    {{> @title title }}
    {{/if}}
    {{> @list list }}
    {{#if link}}
    {{> @link link }}
    {{/if}}
</div>
 
{
  "title": {
    "text": "Resumen de requisitos",
    "type": "-m"
  },
  "link": {
    "text": "Ver todos los requisitos",
    "href": "#"
  },
  "list": {
    "listitem": [
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      },
      {
        "name": "bullet-list",
        "text": "POR LO QUE PUEDA PASAR",
        "type": "-m"
      }
    ],
    "isTwoCols": true
  }
}
  • Content: 
    .requirements-banner {
    width: 100%;
    height: 100%;
    padding: 80px 80px;
    background-color: var(--color-background-accent);
    @media (--viewport-ms-max) {
        padding: 32px 30px;
    }
    .title-m{
        margin-bottom: 30px;
        display: block;
    }
    .link{
        margin-top: 14px;
    }
    .list.twocols ul {
        column-gap: 30px;
        row-gap: 24px;
        @media (--viewport-ms-max) {
            row-gap:16px;
        }
    }
    .list.twocols ul li {
        width: calc(50% - 15px);
        padding: 0;
        @media (--viewport-ms-max) {
            width: 100%;
        }
    }
}
  • URL: /components/raw/requirements-banner/requirements-banner.css
  • Filesystem Path: src/02-molecules/requirements-banner/requirements-banner.css
  • Size: 628 Bytes

No notes defined.