UCI

Caption: Placeholder L 

<span class="caption-placeholder-l">placeholder L</span>
 
{{#if isInput}}
    {{> '@form-input' inputCaption}}
{{else if isSelect}}
    {{> '@form-select' selectCaption}}
{{else}}
    <span class="caption{{type}}">{{{text}}}</span>
{{/if}}
 
{
  "type": "-placeholder-l",
  "text": "placeholder L"
}
  • 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.