<section class="ai-rich-text ai-component">
    <div class="ai-container">
        <div class="ai-width-m ai-m-auto">
            <p class="text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.</p>

            <h3 class="h4">You say,'There's a better way to learn.' What does AI enable Atom Learning to do that traditional education methods can't?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.</p>
            <h3 class="h4">You say,'There's a better way to learn.' What does AI enable Atom Learning to do that traditional education methods can't?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.</p>
            <h3 class="h4">ow do you envision the concept of 'school' will evolve? How might the role of traditional classrooms be transformed?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.</p>
            <img alt="" src="../../images/bitmap/rich-text-image.jpg" />
            <p class="image-caption">Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt.</p>
        </div>
    </div>
</section>
<section class="ai-rich-text ai-component">
    <div class="ai-container">
        <div class="ai-width-m ai-m-auto">
            {{#if stand-first}}
                <p class="text-grey">{{{stand-first}}}</p>
            {{/if}}

            {{#if sections}}
                {{#each sections}}
                    {{#if heading}}
                        <h3 class="h4">{{{heading}}}</h3>
                    {{/if}}
                    {{#if text}}
                        <p>{{{text}}}</p>
                    {{/if}}
                    {{#if image}}
                        <img alt="" src="{{{path image}}}"/>
                    {{/if}}
                    {{#if image-caption}}
                        <p class="image-caption">{{{image-caption}}}</p>
                    {{/if}}
                {{/each}}
            {{/if}}
        </div>
    </div>
</section>
{
  "stand-first": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.",
  "sections": [
    {
      "heading": "You say,'There's a better way to learn.' What does AI enable Atom Learning to do that traditional education methods can't?",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.",
      "image": "",
      "image-caption": ""
    },
    {
      "heading": "You say,'There's a better way to learn.' What does AI enable Atom Learning to do that traditional education methods can't?",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.",
      "image": "",
      "image-caption": ""
    },
    {
      "heading": "ow do you envision the concept of 'school' will evolve? How might the role of traditional classrooms be transformed?",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris metus, gravida condimentum tortor sit amet, maximus scelerisque mi. Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt. Nullam ac nibh ac est rutrum pretium eget rutrum nibh. Donec tristique turpis eget hendrerit varius. Nam vulputate lacinia lectus vel tempus.",
      "image": "/images/bitmap/rich-text-image.jpg",
      "image-caption": "Phasellus et dictum orci. Pellentesque aliquam id lacus sit amet tincidunt."
    }
  ]
}
  • Content:
    //  rich text
    
    section{
        &.ai-rich-text{
            padding: 1.5rem 0 2rem 0;
            h3{
                padding: 2rem 0 1rem 0;
            }
            h3, p{
                @media (min-width: $medium) {
                    width: 75%;
                }
            }
            img{
                margin: 2rem 0 0.5rem 0;
            }
            .image-caption{
                @media (min-width: $medium) {
                    width: 50%;
                }
            }
        }
    }
  • URL: /components/raw/rich-text/rich-text.scss
  • Filesystem Path: src/components/02-components/rich-text/rich-text.scss
  • Size: 430 Bytes

No notes defined.