UCI

List: Multiple Listings Size M 

<div class="list__multiple ">
    <div class="list">
        <div class="list__title">
            <span class="title-m
                    
                    
                    ">Title m</span>
            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
        </div>
        <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">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. </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">up to 150 characters. Lorem ipsum dolor sit amet</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
        </ul>
    </div>
    <div class="list">
        <div class="list__title">
            <span class="title-m
                    
                    
                    ">Title m</span>
            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
        </div>
        <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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. </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">up to 150 characters. Lorem ipsum dolor sit amet</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</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">up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
            </li>
        </ul>
    </div>
</div>
 
{{#if multiple}}
<div class="list__multiple {{#if fullspace}} fullspace{{/if}}">
{{#each listUl}}
    <div class="list{{#if isTwoCols}} twocols{{/if}}">
        {{#if hasTitle}}
        <div class="list__title">
            {{> '@title' title}}
        </div>
        {{/if}}
        <ul>
            {{#each listitem}}
            <li>
                {{#if name}}{{> @icon this }}{{/if}}{{> @bodycopy this }}
            </li>
            {{/each}}
        </ul>
    </div>
{{/each}}
</div>
{{else}}
    <div class="list{{#if isTwoCols}} twocols{{/if}}">
        {{#if hasTitle}}
        <div class="list__title">
            {{> '@title' title}}
        </div>
        {{/if}}
        <ul>
            {{#each listitem}}
            <li>
                {{#if name}}{{> @icon this }}{{/if}}{{> @bodycopy this }}
            </li>
            {{/each}}
        </ul>
    </div>
{{/if}}
 
{
  "listitem": [
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    },
    {
      "text": "POR LO QUE PUEDA PASAR",
      "type": "-s"
    }
  ],
  "multiple": true,
  "listUl": [
    {
      "hasTitle": true,
      "title": {
        "type": "-m",
        "text": "Title m"
      },
      "listitem": [
        {
          "name": "bullet-list",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. ",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit",
          "type": "-m"
        }
      ]
    },
    {
      "hasTitle": true,
      "title": {
        "type": "-m",
        "text": "Title m"
      },
      "listitem": [
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. ",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore",
          "type": "-m"
        },
        {
          "name": "bullet-list",
          "text": "up to 150 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit",
          "type": "-m"
        }
      ]
    }
  ]
}
  • Content: 
    .list {
    li{display: flex; align-items:flex-start; padding:0 0 16px; 
        .icon{min-width:24px; width: 24px; height:24px; margin-right: 10px;}
        .bodycopy-s {display:inline; width: calc(100%-44px);color: var(--color-text-subtle);}  
    }
    &.twocols{
        ul{width: 100%;display: flex; flex-wrap: wrap;
            li{width: 50%; padding-right: 10px;
                &:nth-child(2), &:nth-child(4), &:nth-child(6), &:nth-child(8), &:nth-child(10), &:nth-child(12), &:nth-child(14), &:nth-child(16), &:nth-child(18), &:nth-child(20), &:nth-child(22), &:nth-child(24), &:nth-child(26), &:nth-child(28){padding-left: 10px; padding-right:0;}
                @media (--viewport-xs-max) {
                    width:100%; padding-right: 0;
                    &:nth-child(2), &:nth-child(4), &:nth-child(6), &:nth-child(8), &:nth-child(10), &:nth-child(12), &:nth-child(14), &:nth-child(16), &:nth-child(18), &:nth-child(20), &:nth-child(22), &:nth-child(24), &:nth-child(26), &:nth-child(28){padding-left: 0;}
                }
            }
        }
    }
    
    &__title {
        margin-bottom: 24px;
    }
    &__multiple {
        display:flex;
        justify-content: flex-start;
        align-items: flex-start;  
        @media (--viewport-xs-min) {
            flex-flow: column;
            gap: 40px;
        }

        @media (--viewport-ms-min) {
            flex-flow: nowrap;
            gap: 30px;
        }
        &.fullspace {
            flex-flow: wrap;
            .list {
                flex-basis: 100%;
            }
        }
        .list {
            display:flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;     
            flex-basis: 50%;
        }
    }
}
  • URL: /components/raw/list/list.css
  • Filesystem Path: src/02-molecules/list/list.css
  • Size: 1.8 KB

No notes defined.