<div class="input-detailed-help">
    <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
</div>
<div class="input-detailed-help">
	{{ icon 'core/info-alt' 14 }} Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. <a href="https://grabaperch.com/">Read more</a>
</div>
/* No context defined for this component. */
  • Content:
    .input-detailed-help {
    	@include font-scale(sm, helvetica);
    	color: palette(type, light);
    	padding-bottom: $half-gutter;
    }
    
    .input-detailed-help code {
    	color: palette(type, dark);
    	background-color: #fff;
    }
    
    .input-detailed-help a:link,
    .input-detailed-help a:visited {
    	color: palette(info);
    }
    
    .input-detailed-help svg {
    	fill: palette(info);
    	vertical-align: text-top;
    	margin-right: .1rem;
    }
    
    @include media(">bp-m") {
    	.input-detailed-help {
    		padding: 0 $half-gutter;
    	}
    }
  • URL: /components/raw/input-detailed-help/input-detailed-help.scss
  • Filesystem Path: src/components/12-forms/01-atoms/16-input-detailed-help/input-detailed-help.scss
  • Size: 479 Bytes

There are no notes for this item.