<div class="field-annotations m" id="myfield-annotations">
    <div class="char-limit-count" aria-live="polite"><svg width="10" height="10" class="icon icon-o-typewriter"><use xlink:href="/assets/svg/core.svg#o-typewriter" /></svg> 123 characters remaining</div>
    <div class="word-count" aria-live="polite"><svg width="10" height="10" class="icon icon-o-typewriter"><use xlink:href="/assets/svg/core.svg#o-typewriter" /></svg> 150 words</div>
    <div class="formatting-language"><svg width="10" height="10" class="icon icon-o-pencil"><use xlink:href="/assets/svg/core.svg#o-pencil" /></svg> <a href="#">Markdown</a> </div>
</div>
<div class="field-annotations {{ class_input_size }}" id="{{ field_id }}-annotations">
	<div class="char-limit-count" aria-live="polite">{{ icon 'core/o-typewriter' 10 }} 123 characters remaining</div>
	<div class="word-count" aria-live="polite">{{ icon 'core/o-typewriter' 10 }} 150 words</div>
	<div class="formatting-language">{{ icon 'core/o-pencil' 10 }} <a href="#">Markdown</a> </div>
</div>
{
  "field_id": "myfield",
  "class_input_size": "m"
}
  • Content:
    .field-annotations {
    	@include font-scale(s, helvetica);
    	color: palette(type, light);
    	margin-top: .2em;
      line-height: 1;
    }
    
    .field-annotations a:link,
    .field-annotations a:visited {
    	color: palette(type, light);
    	text-decoration: none;
    }
    
    .field-annotations:hover a:link,
    .field-annotations a:hover,
    .field-annotations a:active {
    	color: palette(type, light);
    	text-decoration: underline;
    }
    
    .field-annotations svg {
    	fill: palette(type, light);
    }
    
    @include media(">bp-xs") {
    	.field-annotations {
    		display: flex;
    		justify-content: space-between;
    		flex-direction: row-reverse;
    	}
    }
    
    @include media(">bp-s") {
    
    
      .field-annotations.xxs {
        width: 2em;
      }
    
      .field-annotations.xs {
        width: 2em;
      }
    
      .field-annotations.s {
        width: 5em;
      }
    
      .field-annotations.m {
        width: 70%;
      }
    
      .field-annotations.l {
        width: 80%;
      }
    
      .field-annotations.xl {
        width: 90%;
      }
    
      .field-annotations.xxl {
        width: 100%;
      }
    
      .field-annotations.textarea.xxs {
        width: 40%;
      }
    
      .field-annotations.textarea.xs {
        width: 40%;
      }
    
      .field-annotations.textarea.s {
        width: 40%;
      }
    
      .field-annotations.textarea.m {
        width: 70%;
      }
    
      .field-annotations.textarea.l {
        width: 100%;
      }
    
      .field-annotations.textarea.xl {
        width: 100%;
      }
    
      .field-annotations.textarea.xxl {
        width: 100%;
      }
    
    }
    
    @include media(">bp-m") {
      .field-annotations.m {
        width: 40%;
      }
    
      .field-annotations.l {
        width: 60%;
      }
    
    
      .field-annotations.xl {
        width: 80%;
      }
    
    
      .field-annotations.xxl {
        width: 100%;
      }
    
      .field-annotations.textarea.m {
        width: 100%;
      }
    
      .field-annotations.textarea.l {
        width: 100%;
      }
    
    
      .field-annotations.textarea.xl {
        width: 100%;
      }
    
    
      .field-annotations.textarea.xxl {
        width: 100%;
      }
    
    }
    
  • URL: /components/raw/field-annotations/field-annotations.scss
  • Filesystem Path: src/components/12-forms/01-atoms/08-field-annotations/field-annotations.scss
  • Size: 1.8 KB

Accessibility example from here