<div class="text">
    <figure class="text__image-container text__image-container--right text__image-container--half">
        <img class="text__image" loading="lazy" src="holder.js/800x650?auto=yes&random=yes" alt="placeholder">
        <figcaption class="text__image-caption">
            Caption of image
        </figcaption>
    </figure>

    <div class="text__content ">
        <h2>A header passed within the rich text field</h2>
        <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>
        <h3>Unordered list</h3>
        <ul>
            <li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li>
            <li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019<ul>
                    <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
                    <li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
                </ul>
            </li>
            <li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li>
        </ul>
        <h3>Ordered list</h3>
        <ol>
            <li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li>
            <li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li>
            <li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li>
        </ol>
    </div>

    <figure class="text__mobile-image">
        <img class="text__image" loading="lazy" src="holder.js/800x650?auto=yes&random=yes" alt="placeholder">
        <figcaption class="text__image-caption">
            Caption of image
        </figcaption>
    </figure>
</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": "<h2>A header passed within the rich text field</h2><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><h3>Unordered list</h3> <ul><li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li><li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li><li>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li></ul></li><li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li></ul> <h3>Ordered list</h3> <ol><li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li><li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li><li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li></ol> ",
    "addImage": true,
    "image": {
      "src": "holder.js/800x650?auto=yes&random=yes",
      "altText": "placeholder",
      "caption": "Caption of image"
    },
    "width": "half",
    "placement": "right"
  }
}
  • 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.