1. Components
  2. Text

Text passage

A passage of text, typically seen in articles and blog posts, that may include various components.

Default text passage orc-c-text-passage

A passage of text, typically seen in articles and blog posts, that may include various components.

Lined bottom thick text passage orc-c-text-passage--lined-bottom-thick

Applies a thick bottom border on the text passage.

Lined top text passage orc-c-text-passage--lined-top

Adds a border to the top of the text passage.

Lined bottom text passage orc-c-text-passage--lined-bottom

Applies a bottom border to the text passage.

Lined text passage orc-c-text-passage--lined

Applies both top and bottom borders to the text passage.

Tiny text passage orc-c-text-passage--tiny

Shrinks the text to a tiny font size.

Small text passage orc-c-text-passage--small

Shrinks the text to a small font size.

Medium 2 text passage orc-c-text-passage--med-2

Increases the font size to medium.

White text passage orc-c-text-passage--white

Changes the color of the text to white.

  • 

    <div class="orc-c-text-passage ">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--lined-bottom-thick">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--lined-top">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--lined-bottom">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--lined">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--tiny">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--small">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--med-2">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->
    

  • 

    <div class="orc-c-text-passage orc-c-text-passage--white">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam necessitatibus reprehenderit ipsum repellat quasi ratione sit possimus 🙂 eveniet, ea, ut mollitia repudiandae eligendi unde aperiam molestiae voluptatibus error. Dolorem, iure.</p>
  <p>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui.</p>
  <h2>This is a second-level heading</h2>
  <p><a href='#'>Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. <em>Cras a erat a diam venenatis aliquam</em>. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus
    et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor.</p>
  <ol>
    <li>Ordered list item</li>
    <li>Another ordered list item</li>
    <li>Yet another ordered list item</li>
  </ol>
  <h3>This is a third-level heading</h3>
  <p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam
    purus nulla, tempor eget ullamcorper quis, rhoncus non dui.</p>
  <h3><a href='#'>This is a linked heading</a></h3>
  <ul>
    <li>Bulleted list item</li>
    <li>Another bulleted list item</li>
    <li>Yet bulleted list item</li>
    <li>And here's yet another bulleted list item</li>
  </ul>
  <blockquote>This is a blockquote. Eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo eget est blandit dignissim a eu ante. Morbi augue nulla <cite>Cite Source</cite></blockquote>
  <h4>This is a fourth-level heading</h4>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor
    convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.</p>
  <h5>This is a fifth-level heading</h5>
  <p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel.</p>
  <h6>This is a sixth-level heading</h6>
  <p>Lorem ipsum dolor sit amet.</p>

</div>
<!--end orc-c-text-passage-->

Usage

When to use

This is a highly flexible component that can be used for the creation of any long-form text content. It can incorporate section headers, subsection headers, and other components and media.

When to consider an alternative

When providing details that are critical for a reader—such as dates, times, locations, and links—consider a split passage list to include both a long-form write-up and details section.

Class Name Description 
orc-c-text-passage
Required

Apply to the text passage’s containing HTML element. This class allows for generic tags within this container to be styled properly.

 
orc-c-text-passage--lined-bottom-thick
Modifier

Apply in addition to orc-c-text-passage to apply a thick bottom border on the text passage.

 
orc-c-text-passage--lined-top
Modifier

Apply in addition to orc-c-text-passage to apply a top border on the text passage.

 
orc-c-text-passage--lined-bottom
Modifier

Apply in addition to orc-c-text-passage to apply a bottom border to the text passage.

 
orc-c-text-passage--lined
Modifier

Apply in addition to orc-c-text-passage to apply both top and bottom borders to the text passage.

 
orc-c-text-passage--tiny
Modifier

Apply in addition to orc-c-text-passage to shrink the text to a tiny font size.

 
orc-c-text-passage--small
Modifier

Apply in addition to orc-c-text-passage to shrink the text to a small font size.

 
orc-c-text-passage--med-2
Modifier

Apply in addition to orc-c-text-passage to increase the font size to font-size-med-2 SCSS variable.

 
orc-c-text-passage--white
Modifier

Apply in addition to orc-c-text-passage to make text color lighter.