UCI

Caption: Input Caption L 

<div class="form-input">
        <div class="field-top form-list__tooltip-label_default">
            <label class="label-m" for="">Field Text</label>
            <div class="field-top__wrap">
                <a class="link
                            
                            
                            
                            link_inline
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                    <span>Link</span>
                </a>

                <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                <div class="tooltip  flex">
                    <svg class="icon icon-16_tooltip     ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
                    </svg>

                    <div class="msg-tooltip">
                        <span class="arrow"></span>
                        <div class="wrap">
                            <p class="
                                    title-s
                                    
                                ">Títulilllo</p>
                            <div class="
                                    bodycopy-s
                                    
                                    
                                    
                                    
                                ">

                                Este es el texto.

                            </div> <a class="link
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                <span>Enlacillo</span>
                            </a>

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

            </div>
        </div>
        <div class="form-input__fieldset ">
            <input class="form-input__input caption-placeholder-l" id="" type="text" name="" title="Example form input" value="5.000">
            <div class="form-input__symbol" for="">
                <div class="bodycopy-xs
                    
                    
                    ">
                    €
                </div>
            </div>

        </div>
        <div class="field-bottom">
        </div>
    </div>
 
{{#if isInput}}
    {{> '@form-input' inputCaption}}
{{else if isSelect}}
    {{> '@form-select' selectCaption}}
{{else}}
    <span class="caption{{type}}">{{{text}}}</span>
{{/if}}
 
{
  "type": "-call to action",
  "text": "call to action Default",
  "isInput": true,
  "inputCaption": {
    "field-top": {
      "label": {
        "text": "Field Text"
      },
      "link": {
        "isInline": true,
        "href": "#",
        "text": "Link"
      },
      "tooltip": {
        "isFlex": true,
        "title": {
          "text": "Títulilllo",
          "isP": true
        },
        "bodycopy": {
          "text": "Este es el texto."
        },
        "link": {
          "href": "#",
          "text": "Enlacillo"
        }
      }
    },
    "hasID": false,
    "extraClasses": "caption-placeholder-l",
    "inputTitle": "Example form input",
    "idComponent": "ingresosMes",
    "inputValue": "5.000",
    "symbol": {
      "text": "€"
    }
  }
}
  • Content: 
    [class*='caption-'] {
    font-family: var(--font-family-sans-low);
    letter-spacing: var(--font-letter-spacing-wide);
}
.caption {
    /* extend class: btn molecule */
    &-call-to-action {
        font-size: var(--font-size-4);
        line-height: var(--font-line-height-3);
        font-family: var(--font-family-sans-mid);
    }
    
	&-placeholder-L, &-placeholder-l{
		font-size: var(--font-size-10);
		line-height: var(--font-line-height-6);
		font-family: var(--font-family-news-low);

        .access-select__option,
		&::placeholder {
			font-size: var(--font-size-10);
			line-height: var(--font-line-height-6);
			font-family: var(--font-family-news-low);
		}
	}

	&-placeholder-M, &-placeholder-m {
		font-size: var(--font-size-4);
		line-height: var(--font-line-height-3);
		font-family: var(--font-family-sans-low);

        .access-select__option,
		&::placeholder {
			font-size: var(--font-size-4);
			line-height: var(--font-line-height-3);
			font-family: var(--font-family-sans-low);
		}
	}
   
    /* extend class: label atom */
    &-label {
        font-size: var(--font-size-1);
        line-height: var(--font-line-height-1);
        font-family: var(--font-family-sans-mid);
        letter-spacing: var(--font-letter-spacing-label);
        text-transform: uppercase;
    }

}
  • URL: /components/raw/caption/caption.css
  • Filesystem Path: src/01-atoms/caption/caption.css
  • Size: 1.3 KB

No notes defined.