Custom theme (replace with client name)

Text: With Half Width Image On Left 

<div class="text">

    <div class="text__content ">
        <h2 class="text__header  ">
            A header passed in as a string
        </h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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>
        <h4>Ph.D students</h4>
        <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 </li>
            <li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li>
        </ul>
        <h4>MUP students</h4>
        <ul>
            <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>
        </ul>
    </div>

</div>
 
{% import "macros/image-source/image-source.twig" as imageMacros %}

<div class="text">
    {% if component.imageToggle %}
        <div class="text__image text__image--{{ component.placement }} text__image--{{ component.width }}">
            {{ imageMacros.createWidthOnlyCrop(component.image, 500, background) }}
        </div>
    {% endif %}

    <div class="text__content ">
        <h2 class="text__header  {{ component.hideHeader ? 'text__header--is-hidden' : '' }}">
            {{ component.header }}
        </h2>
        {{ component.richText }}
    </div>

    {% if component.imageToggle %}
        <div class="text__mobile-image">
            {{ imageMacros.createWidthOnlyCrop(component.image, 500, background) }}
        </div>
    {% endif %}
</div>
 
{
  "component": {
    "type": "text",
    "header": "A header passed in as a string",
    "richText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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><h4>Ph.D students</h4> <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 </li><li>Ozge Yenigun: Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li></ul> <h4>MUP students</h4> <ul><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></ul> ",
    "image": {
      "src": "https://picsum.photos/1280/650",
      "altText": "placeholder",
      "caption": "Caption of image"
    },
    "width": "half",
    "placement": "left"
  }
}
  • Content: 
    .text
    @extends $richText
    @extends $componentWithMargin
    clear both

    &__image
        display none

        +above(720px)
            display initial

        &--left
            float left
            margin 0 48px 24px 0

        &--right
            float right
            margin 0 0 24px 48px

        &--half
            width 50%

        &--third
            width 33%

    &__header
        @extends $headline1
        overflow-wrap break-word

        &--is-hidden
            @extends $visually-hidden

    &__mobile-image
        display block

        +above(720px)
            display none
  • URL: /components/raw/text/text.styl
  • Filesystem Path: patterns/components/text/text.styl
  • Size: 618 Bytes

No notes defined.