Copy environment

Terms 

<div class="content-section content-section--sticky content-section--inset content-section--visible-sm ">
    <div class="content-section__title text-button">terms and conditions</div>
    <div class="content-section__content">
        <div class="terms">

            <div class="content-section content-section--sticky-z terms__section terms__section--large">
                <div class="content-section__title text-button">1. introduction</div>
                <div class="content-section__content">
                    <div class="terms__section-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                    </div>

                    <div class="content-section content-section--outset content-section--lineless terms__sub-section">
                        <div class="content-section__title ">1.2 subsection</div>
                        <div class="content-section__content">
                            <div class="terms__section-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <div class="content-section content-section--sticky-z terms__section">
                <div class="content-section__title text-button">2. authorized use</div>
                <div class="content-section__content">
                    <div class="terms__section-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                    </div>

                </div>
            </div>

            <div class="content-section content-section--sticky-z terms__section">
                <div class="content-section__title text-button">3. information we collect</div>
                <div class="content-section__content">
                    <div class="terms__section-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                    </div>

                </div>
            </div>

            <div class="content-section content-section--sticky-z terms__section">
                <div class="content-section__title text-button">4. our commitment</div>
                <div class="content-section__content">
                    <div class="terms__section-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                    </div>

                </div>
            </div>

            <div class="content-section content-section--sticky-z terms__section">
                <div class="content-section__title text-button">5. in e-mail and other electronics</div>
                <div class="content-section__content">
                    <div class="terms__section-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
 
{% macro sectionContent(section) %}
    {% if section.text %}
        <div class="terms__section-text">
            {{ section.text }}
        </div>
    {% endif %}
    {% if section.subSections %}
        {% for subSection in section.subSections %}
            {% include '@content-section' with {class: "terms__sub-section", modifier: "content-section--outset content-section--lineless", data: {title: subSection.title, content: _self.sectionContent(subSection) }} %}
        {% endfor %}
    {% endif %}
{% endmacro %}

{% import _self as terms %}

{% set content %}
    {% if data.sections %}
        <div class="terms">
            {% for section in data.sections %}
                {% include '@content-section' with {class: section.subSections ? "terms__section terms__section--large" : "terms__section", modifier: "content-section--sticky-z", data: {title: section.title, content: terms.sectionContent(section) }} %}
            {% endfor %}
        </div>
    {% endif %}
{% endset %}

{% include '@content-section' with {modifier: 'content-section--sticky content-section--inset content-section--visible-sm', data: {title: data.sectionTitle, content: content}} %}

{
  "language": "en-US",
  "data": {
    "sectionTitle": "terms and conditions",
    "sections": [
      {
        "title": "1. introduction",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.",
        "subSections": [
          {
            "title": "1.2 subsection",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
          }
        ]
      },
      {
        "title": "2. authorized use",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
      },
      {
        "title": "3. information we collect",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
      },
      {
        "title": "4. our commitment",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
      },
      {
        "title": "5. in e-mail and other electronics",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
      }
    ]
  }
}
  • Content: 
    .terms {
    @include bp(sm-min) {
        margin-top: 60px;
    }
}

.terms__section-text {
    padding: 16px;

    @include bp(sm-min) {
        font-size: $font-size-large-lg;
        line-height: $font-line-height-large-lg;
        padding: 32px 32px 64px 24px;
    }

    .terms__sub-section & {
        max-width: 1200px;
    }
}

.terms__section {
    &:last-child {
        padding-bottom: 60px;

        @include bp(sm-min) {
            padding-bottom: 100px;
        }
    }
}

.terms__sub-section {
    z-index: map_get($zindex, default);
    border-top: none;
    background-color: var(--color-background);
    transition: $transition-duration $transition-easing;
    transition-property: background-color, border-bottom-color;

    @include bp(sm-min) {
        border-top: 1px solid;
    }
}

.content-section__content {
    .terms__section & {
        padding-bottom: 24px;

        @include bp(sm-min) {
            padding-bottom: 0;
        }
    }

    .terms__section--large & {
        @include bp(sm-min) {
            padding-bottom: 60px;
        }
    }

    .terms__section:last-child > & {
        box-shadow: none;
    }
}
  • URL: /components/raw/terms/terms.scss
  • Filesystem Path: src/patterns/modules/terms/terms.scss
  • Size: 1.2 KB
  • Handle: @terms--default
  • Filesystem Path: src/patterns/modules/terms/terms.twig
  • References (1): @content-section
  • Referenced by (1): @view-terms