<div class="field-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit
    ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis
    gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id.</div>
{% if field_description %}
  <div class="field-description">{{ field_description|default(field_description) }}</div>
{% endif %}
{
  "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium. Vivamus tellus metus, pretium eu nibh vitae, eleifend luctus dolor. Morbi feugiat tristique ante eu egestas. Nunc ligula magna, fringilla sed consequat id, pellentesque at risus. Nunc ex elit, tincidunt at lorem vel, mattis gravida nisl. Praesent sodales nibh massa, id ultrices metus viverra id."
}
  • Content:
    .field-description {
    
      @include themify {
        background-color: $field-description-background;
        color: $field-description-color;
      }
    
      position: relative;
      padding: .5rem .5rem .5rem 2.5rem;
      border-radius: $radius-1;
      font-size: .9rem;
      line-height: 1.1rem;
    
      &::before {
        @extend %icon-base-css;
        @extend %icon-info-circle;
    
        position: absolute;
        top: .5rem;
        left: .75rem;
        font-size: 1.25rem;
      }
    }
    
  • URL: /components/raw/field-description/_field-description.scss
  • Filesystem Path: components/21-atoms/field-description/_field-description.scss
  • Size: 431 Bytes

Field Description atom

General

This atom is used in the context of a webform or an interactive field on a website. The field description is used as a tool tip. This element is always used in combination with a field.

Themify

This is a themify enabled component. Please use the themify mixin as defined in mixins to change the colorscheme of this description.