Flap-old: Hipotecas With Title And Btn

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <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">

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div class="flap-old">
                        <ul>
                            <li class="texto light">
                                <h3 class="
        title-m
        
        
        
        
    ">¿Quieres más información sobre nuestra hipotecas? Hablemos.</h3>

                            </li>

                            <li>
                                <ul>

                                    <li class="button"> <a class="btn 
        
         
        
        
        
        
        
        
        
        
        
        " href="#" id="">
                                            BTN
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>


        {{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
{{#if isFractal}}<div class="fractal" style="min-height:400px;">{{/if}}
    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
    <div {{#if hasID}}id="{{idComponent}}" {{/if}}
        class="flap-old{{#if isSticky}} sticky{{/if}}{{#if isDark}} dark{{/if}}{{#if isAccent}} accent{{/if}}{{#if isWhite}} white{{/if}}{{#if isGrey}} grey{{/if}}{{#if isAlert}} alert{{/if}}">
        <ul>
            {{#if isText}}<li
                class="texto{{#if hasImg}} content-img{{/if}}{{#if isTextLight}} light{{/if}}{{#if src-title-img}} title-img{{/if}}{{#if src-posttitle-img}} posttitle-img{{/if}}">
                {{#if src-title-img}}<img class="tile__img" src="{{ src-title-img }}"
                    alt="{{ alt-title-img }}">{{/if}}{{#if isTitle}}{{> @title-m title }}{{else if isTitleL}}{{>
                @title-l title }}{{else}}{{> @bodycopy-l
                bodycopy }}{{/if}}{{#if src-posttitle-img}}<img class="tile__img" src="{{ src-posttitle-img }}"
                    alt="{{ alt-posttitle-img }}">{{/if}}
                    </li>{{/if}}
           
            {{#if isActions}}<li>
                <ul>
                    {{#if isLink}}<li class="enlace">{{> @link link }}</li>{{/if}}
                    {{#if isBtn}}<li class="button">{{> @btn btn }}</li>{{/if}}
                </ul>
            </li>{{/if}}
        </ul>
    </div>
    {{#if isFractal}}
</div>{{/if}}

{{/content}}
{{/extend}}


        
            
            {
  "hasID": false,
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true,
    "paddingTopLarge": false,
    "paddingBottomLarge": false
  },
  "isText": true,
  "isActions": true,
  "isLink": false,
  "isBtn": true,
  "title": {
    "text": "¿Quieres más información sobre nuestra hipotecas? Hablemos."
  },
  "bodycopy": {
    "text": "Estamos disponibles para ti, ven a conocer nuestro equipo de expertos hipotecarios. No dudes en llamarnos al 912 06 37 98 o escribirnos."
  },
  "link": {
    "text": "Link",
    "href": "#"
  },
  "btn": {
    "text": "BTN",
    "href": "#"
  },
  "isTitle": true,
  "isTextLight": true
}

File:

Content:


                                .flap-old {
    width: 100%;
    background-color: var(--color-accent-light);
    padding: 40px;
    @media (--viewport-md-max) {
        padding: 40px 70px;
    }
    @media (--viewport-ms-max) {
        padding: 40px;
    }
    @media (--viewport-xs-max) {
        padding: 30px;
    }

    &.sticky {
        bottom: 0;
        position: fixed;
        max-width: 1314px;
        z-index: 5;
        @media (--viewport-md-max) {
            max-width: 1352px;
        }
        @media (max-width: 1413px){
            max-width: calc(100% - 62px);
        }
        @media (--viewport-sm-max) {
            max-width: calc(100% - 58px);
        }
        @media (--viewport-ms-max) {
            max-width: calc(100% - 62px);
        }
        @media (--viewport-xs-max) {
            max-width: 100%;
            margin-left: -20px;
        }
    }

    &.dark {
        background-color: var(--color-accent-dark);
        color: var(--color-txt-secondary);

        .link {
            color: var(--color-txt-secondary);

            span:after {
                background-color: var(--color-txt-secondary);
            }
        }

        .bodycopy-l {
            color: var(--color-txt-secondary);
        }

        .title-m {
            color: var(--color-txt-secondary)
        }

        .title-l {
            color: var(--color-txt-secondary)
        }
    }

    &.white {
        background-color: var(--color-white);
    }

    &.grey {
        background-color: var(--color-quaternary);
    }

    &.accent {
        background-color: var(--color-accent);
        color: var(--color-white);

        .link {
            color: var(--color-white);

            span:after {
                background-color: var(--color-white);
            }
        }

        .bodycopy-l {
            color: var(--color-white);
        }

        .title-m {
            color: var(--color-white)
        }

        .title-l {
            color: var(--color-white)
        }
    }

    ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (--viewport-ms-max) {
            flex-direction: column;
        }

        li {
            flex-grow: 0;

            &.texto {
                margin-right: 100px;
                @media (--viewport-ms-max) {
                    margin-bottom: 20px;
                    margin-right: 0;
                    text-align: center;
                }
                &.content-img {
                    margin-right:0;
                    .bodycopy-l{
                        display: flex;
                        flex-flow: wrap;
                        @media (--viewport-ms-max) {
                            flex-flow: column;
                        }
                        .list-img {
                            display:flex;
                            justify-content: space-around;
                            margin-left:20px;
                            gap:20px;
                            @media (--viewport-ms-max) {
                                margin-top: 30px;
                            }
                        }
                    }
                    
                    
                    
                
                }
            }
             
            /*&.enlace{ flex-grow: 1;}*/
            /*&:last-child{ flex-grow: 0;}*/
            &:only-child {  
                flex-basis: auto;
                flex-grow: 1;
                text-align: center;
            }

            ul {
                justify-content: flex-end;

                li {
                    padding-left: 40px;
                    white-space: nowrap;

                    &.enlace {
                        @media (--viewport-ms-max) {
                            order: initial;
                        }
                    }
                }

                li+li {
                    @media (--viewport-ms-max) {
                        margin-top: 20px;
                    }
                }
            }

            &.title-img {
                display: flex;
                text-align: left;
                align-items: flex-start;

                img {
                    max-width: 40px;
                    height: auto;
                    margin-right: 30px;
                }

                &:only-child {
                    flex-grow: 0;
                }
            }

            &.posttitle-img {
                display: flex;
                text-align: left;
                align-items: flex-start;

                img {
                    height: 25px;
                    width: auto;
                    left: 5px;
                    top: 5px;
                    position: relative;
                }

                &:only-child {
                    flex-grow: 0;
                }
            }

            &.light {
                .bodycopy-l {
                    color: var(--color-accent-dark);
                }

                .title-m {
                    color: var(--color-accent-dark);
                }

                .title-l {
                    color: var(--color-accent-dark);
                }
            }
        }
    }

    &.alert {
        background-color: var(--color-danger-05);
        border: solid 1px var(--color-danger);
        color: var(--color-secondary);


        .bodycopy-l {
            color: var(--color-secondary);
        }

        .title-m {
            color: var(--color-secondary)
        }

        .title-l {
            color: var(--color-secondary)
        }

        ul {
            li {
                @media (--viewport-ms-max) {
                    flex-direction: column;

                    img {
                        margin: 0 auto 10px;
                    }
                }

                &.texto {
                    margin-right: 0;

                    @media (--viewport-ms-max) {
                        margin-bottom: 0;
                    }
                }

                &.title-img {
                    .title-m {
                        color: var(--color-secondary);
                    }
                }
            }
        }
    }

    @media (--viewport-xs-max) {
        ul {
            flex-direction: column;

            li {
                order: 0;
                text-align: center;
                padding-bottom: 10px;

                /*flex-grow: 0;*/
                .bodycopy-l {
                    padding-bottom: 10px;
                }

                .title-m {
                    padding-bottom: 10px;
                }

                &.enlace {
                    order: 3;
                    padding-bottom: 0;
                }

                &.texto {
                    padding-bottom: 10px;
                }

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

                ul {
                    li {
                        padding-left: 0;
                        padding-bottom: 20px;

                        &:first-child {
                            padding-bottom: 0;
                        }

                        &:last-child {
                            padding-bottom: 20px;
                        }

                        &:only-child {
                            padding-bottom: 0;
                        }
                    }
                }

                &:only-child {
                    .bodycopy-l {
                        padding-bottom: 0;
                    }
                }
            }
        }
    }
}

URL: /components/raw/flap-old/flap-old.css
Filesystem Path: src/06-adhoc/deprecated/flap-old/flap-old.css
Size: 7.6 KB

Handle: @flap-old--hipotecas-with-title-and-btn
Variants (39): Default , Hipotecas , Uci Sticky , Hipotecas , Hipotecas Sticky , Dark , Dark Sticky , Hipotecas Dark , Hipotecas Dark Sticky , White , White Sticky , Grey , Grey Sticky , With Title Link And Btn , With Title Link And Btn Sticky , With Title And Btn , With Title And Btn Sticky , With Bodycopy And Link , With Bodycopy And Link Sticky , Just One Button , Just One Button Sticky , Just Text , Just Text Sticky , Hipotecas With Title And Btn , Hipotecas With Title And Btn Sticky , Hipotecas With Bodycopy And Link , Hipotecas With Bodycopy And Link Sticky , Hipotecas Just One Button , Hipotecas Just One Button Sticky , Hipotecas Just Text , Hipotecas Just Text Sticky , Alert , Alert Hipotecas , With Icon In Title , With Icon In Title Hipotecas , Bg Accent , Bg Accent Hipotecas , Bankflip , Bankflip Hipotecas
Preview:
- With layout
- Component only
Filesystem Path: src/06-adhoc/deprecated/flap-old/flap-old.hbs
References (6): @splitter, @title-m, @title-l, @bodycopy-l, @link, @btn

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