<div class="text">

    <div class="text__content ">
        <p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <em>adipiscing elit</em>. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p>
    </div>

</div>
<div class="text">
    {% if component.addImage %}
        <figure class="text__image-container text__image-container--{{ component.placement }} text__image-container--{{ component.width }}">
            <img class="text__image" loading="lazy" src="{{ component.image.src|resize(620) }}" alt="{{ component.image.altText }}">
            {%  if component.image.caption %}
                <figcaption class="text__image-caption">
                    {{ component.image.caption }}
                </figcaption>
            {% endif %}
        </figure>
    {% endif %}

    <div class="text__content ">
        {{ component.richText }}
    </div>

    {% if component.addImage %}
        <figure class="text__mobile-image">
            <img class="text__image" loading="lazy" src="{{ component.image.src|resize(620) }}" alt="{{ component.image.altText }}">
            {%  if component.image.caption %}
                <figcaption class="text__image-caption">
                    {{ component.image.caption }}
                </figcaption>
            {% endif %}
        </figure>
    {% endif %}
</div>
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "component": {
    "type": "text",
    "richText": "<p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <em>adipiscing elit</em>. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p>"
  }
}
  • Content:
    .text {
        @include richText;
        @include componentWithMargin;
        clear: both;
    
        &__image-container {
            display: none;
    
            @media (min-width: 45rem) {
                display: initial;
            }
    
            &--left {
                float: left;
                margin: 0 48px 24px 0;
            }
    
            &--right {
                float: right;
                margin: 0 0 24px 48px;
            }
    
            &--half {
                width: 50%;
            }
    
            &--third {
                width: 33%;
            }
        }
    
        &__image-caption {
            @include detail;
            margin-top: 0.5rem;
        }
    
        &__mobile-image {
            display: block;
            width: 100%;
    
            @media (min-width: 45rem) {
                display: none;
            }
        }
    }
    
  • URL: /components/raw/text/text.scss
  • Filesystem Path: patterns/components/text/text.scss
  • Size: 734 Bytes

No notes defined.