UCI

Flap 

<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="flap">
                        <div class="wrap"><svg class="icon icon-80_configuration     ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#80_configuration"></use>
                            </svg>

                            <ul class="text">
                                <li class="title"><span class="title-m
        
        
        ">Title (optional) up to 100 characters lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
                                <li class="paragraph"><span class="bodycopy-m">Text (optional) up to 200 characters lorem ipsum dolor sit amet, consectetur adipiscing elit ut labore. Duis aute sunt in culpa qui officia deserunt id est t <a href='#'>link inline (optional)</a> laborum ut enim ad minim.</span>
                                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
                            </ul>
                        </div>
                        <ul class="actions">
                            <li class="enlace"> <a class="link
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            " href="#">
                                    <span>link primary (optional)</span>
                                </a>

                            </li>
                            <li class="button"> <a class="btn 
        
         
        
        
        
        
        
        
        
        
        
        " href="#" id="">
                                    Button (optional)
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div{{#if id}}id="{{id}}" {{/if}} class="flap">
    <div class="wrap">{{#if icon}}{{> @icon icon }}{{/if}}
    {{#if isText}}
    <ul class="text">
        {{#if title}}<li class="title">{{> @title title }}</li>{{/if}}
        {{#if paragraph}}<li class="paragraph">{{> @bodycopy paragraph }}</li>{{/if}}
    </ul>
    {{/if}}</div>
    {{#if isActions}}
    <ul class="actions">
        {{#if link}}<li class="enlace">{{> @link link }}</li>{{/if}}
        {{#if btn}}<li class="button">{{> @btn btn }}</li>{{/if}}
    </ul>
    {{/if}}
</div>
{{/content}}
{{/extend}}
 
{
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true,
    "paddingTopLarge": false,
    "paddingBottomLarge": false
  },
  "isText": true,
  "isActions": true,
  "icon": {
    "name": "80_configuration"
  },
  "title": {
    "text": "Title (optional) up to 100 characters lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.",
    "type": "-m"
  },
  "paragraph": {
    "text": "Text (optional) up to 200 characters lorem ipsum dolor sit amet, consectetur adipiscing elit ut labore. Duis aute sunt in culpa qui officia deserunt id est t <a href='#'>link inline (optional)</a> laborum ut enim ad minim.",
    "type": "-m"
  },
  "link": {
    "text": "link primary (optional)",
    "href": "#"
  },
  "btn": {
    "text": "Button (optional)",
    "href": "#"
  }
}
  • Content: 
    .flap {
    width: 100%;
    background-color: var(--color-background-accent);
    padding: 40px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 120px;

    @media (--viewport-sm-max) {
        padding: 40px;
        flex-direction: column;
        gap: 56px;
        text-align: center;
    }

    .wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 40px;
        @media (--viewport-sm-max) {
            flex-direction: column;
        }

        .icon {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
        }

        ul.text {
            li {
                margin-bottom: 16px;

                &:last-child {
                    margin-bottom: 0;
                }

                a {
                    color: var(--color-text-link-secondary);
                }
            }
        }
    }

    ul.actions {
        display: flex;
        gap: 32px;
        white-space: nowrap;
        align-items: center;
        @media (--viewport-sm-max) {
            flex-direction: column;
        }
    }
}
  • URL: /components/raw/flap/flap.css
  • Filesystem Path: src/03-organisms/flap/flap.css
  • Size: 1.1 KB

Variantes: Sticky, Dark, White, Grey, Accent, With Link, With Button, With Title (h3), With Title (h2), With bodycopy, With icon in title, With img before title, Alert