Copy environment

Principle List

<ol class="principle-list">
    <li class="principle-list__item">
        <div class="principle-list__header">

            <h5 class="heading heading--h5 principle-list__heading">
                <span class="heading__small">we are</span>
                <span class="heading__main">
                    reliable
            </span>
            </h5>
        </div>
        <div class="principle-list__content text">
            <p>Focused on the process, streamlined and with quality delivery in mind</p>
        </div>
    </li>
    <li class="principle-list__item">
        <div class="principle-list__header">

            <h5 class="heading heading--h5 principle-list__heading">
                <span class="heading__small">we are for</span>
                <span class="heading__main">
                    the people
            </span>
            </h5>
        </div>
        <div class="principle-list__content text">
            <p>Brand and product feel like a one-to-one relationship; a partner that understands you. Our people only work with a few clients at a time.</p>
        </div>
    </li>
    <li class="principle-list__item">
        <div class="principle-list__header">

            <h5 class="heading heading--h5 principle-list__heading">
                <span class="heading__small">we are</span>
                <span class="heading__main">
                    adventurous
            </span>
            </h5>
        </div>
        <div class="principle-list__content text">
            <p>We are not afraid to try out new ideas, technologies and methods</p>
        </div>
    </li>
    <li class="principle-list__item">
        <div class="principle-list__header">

            <h5 class="heading heading--h5 principle-list__heading">
                <span class="heading__small">we are</span>
                <span class="heading__main">
                    playful
            </span>
            </h5>
        </div>
        <div class="principle-list__content text">
            <p>Tech-savvy people can be fun, too. Keeping our staff friendly, fun and open is a must!</p>
        </div>
    </li>
</ol>
{
  "language": "en-US",
  "data": {
    "items": [
      {
        "title": "reliable",
        "subtitle": "we are",
        "content": "<p>Focused on the process, streamlined and with quality delivery in mind</p>"
      },
      {
        "title": "the people",
        "subtitle": "we are for",
        "content": "<p>Brand and product feel like a one-to-one relationship; a partner that understands you. Our people only work with a few clients at a time.</p>"
      },
      {
        "title": "adventurous",
        "subtitle": "we are",
        "content": "<p>We are not afraid to try out new ideas, technologies and methods</p>"
      },
      {
        "title": "playful",
        "subtitle": "we are",
        "content": "<p>Tech-savvy people can be fun, too. Keeping our staff friendly, fun and open is a must!</p>"
      }
    ]
  }
}
  • Handle: @principle-list--default
  • Tags:
  • Preview:
  • Filesystem Path: src/patterns/components/principle-list/principle-list.twig
  • References (1): @heading
  • Referenced by (1): @how-we-do