Facts DSFACTS DS

Notes

Notes (5)
Jeremiah Haught
Oct 21, 2019 • 9:00 am
This is some content from a media component. You can replace this with any content and adjust it as needed.
Jeremiah Haught
Oct 21, 2019 • 9:00 am
This is some content from a media component. You can replace this with any content and adjust it as needed.
Jeremiah Haught
Oct 21, 2019 • 9:00 am
This is some content from a media component. You can replace this with any content and adjust it as needed.
Jeremiah Haught
Oct 21, 2019 • 9:00 am
This is some content from a media component. You can replace this with any content and adjust it as needed.
Jeremiah Haught
Oct 21, 2019 • 9:00 am
This is some content from a media component. You can replace this with any content and adjust it as needed. 
<div class="col-12">
  <div class="card">
      <div class="card-body">
        <h5 class="card-title">Notes (5)</h5>

          <div class="notes-form">
          <div class="col-md-3 mb-3">
            <select class="form-select" aria-label="notes">
              <option value="general" selected>General</option>
              <option value="please-review">Please Review </option>
              <option value="action-required">Action Required</option>
            </select>
          </div>
          <div class="mb-3">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write a note..."></textarea>
          </div>
          <div class="mb-4">
            <button type="button" class="btn btn-primary">Add Note</button>
          </div>
        </div>

        <div class="notes mt-3">
          <div class="notes-body">
            <div class="d-flex align-items-center">
              <div class="d-flex align-items-center flex-grow-1">
                <span class="fw-bold me-1">Jeremiah Haught</span>
                <div class="dropdown">
                  <button class="btn btn-link m-0 p-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="badge me-1 badge-warning">
                      <svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M11.9899936,17.6323846 C11.2046777,17.6323846 10.604142,17.0317707 10.604142,16.2463526 C10.604142,15.4609344 11.2046777,14.8603205 11.9899936,14.8603205 C12.7753095,14.8603205 13.3758451,15.4609344 13.3758451,16.2463526 C13.3758451,17.0317707 12.7753095,17.6323846 11.9899936,17.6323846 Z M13.3758451,13.4742885 C13.3758451,13.7514949 13.1910649,13.9362991 12.9138946,13.9362991 L11.0660925,13.9362991 C10.7889222,13.9362991 10.604142,13.7514949 10.604142,13.4742885 L10.604142,7.46814957 C10.604142,7.19094316 10.7889222,7.00613889 11.0660925,7.00613889 L12.9138946,7.00613889 C13.1910649,7.00613889 13.3758451,7.19094316 13.3758451,7.46814957 L13.3758451,13.4742885 Z" id="Shape" fill="#111111" fill-rule="nonzero"></path>
                      </svg>Please Review
                    </span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                    <li><a class="dropdown-item" href="#">Mark Complete</a></li>
                  </ul>
                </div>
              </div>
              <div class="text-muted">Oct 21, 2019 • 9:00 am</div>
              <div class="dropdown">
                <button class="btn btn-more dropdown-toggle m-0 pe-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                </button>
                <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                  <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Action Item 4</a></li>
                </ul>
              </div>
            </div>
            <div class="w-100 mb-2">
              This is some content from a media component. You can replace this with any content and adjust it as needed.
            </div>
            <button class="btn btn-link">Reply</button>
            <div class="reply-body mt-3">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center flex-grow-1">
                  <span class="fw-bold me-1">Jeremiah Haught</span>
                </div>
                <div class="text-muted">Oct 21, 2019 • 9:00 am</div>
                <div class="dropdown">
                  <button class="btn btn-more dropdown-toggle m-0 pe-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                    <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                    <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                    <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Action Item 4</a></li>
                  </ul>
                </div>
              </div>
              <div class="w-100 mb-2">
                This is some content from a media component. You can replace this with any content and adjust it as needed.
              </div>
              <button class="btn btn-link">Reply</button>
            </div><!--reply-->
            <div class="reply-body mt-3">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center flex-grow-1">
                  <span class="fw-bold me-1">Jeremiah Haught</span>
                </div>
                <div class="text-muted">Oct 21, 2019 • 9:00 am</div>
                <div class="dropdown">
                  <button class="btn btn-more dropdown-toggle m-0 pe-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                    <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                    <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                    <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Action Item 4</a></li>
                  </ul>
                </div>
              </div>
              <div class="w-100 mb-2">
                This is some content from a media component. You can replace this with any content and adjust it as needed.
              </div>
              <button class="btn btn-link">Reply</button>
            </div><!--reply-->
          </div><!--notes-body-->
        </div><!--notes-->

        <div class="notes mt-3">
          <div class="notes-body">
            <div class="d-flex align-items-center">
              <div class="d-flex align-items-center flex-grow-1">
                <span class="fw-bold me-1">Jeremiah Haught</span>
                <div class="dropdown">
                  <button class="btn btn-link m-0 p-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="badge me-1 badge-success">
                      <svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,0 C18.627,0 24,5.373 24,12 C24,18.627 18.627,24 12,24 C5.373,24 0,18.627 0,12 C0,5.373 5.373,0 12,0 Z M19.0191,6.40035 C18.4116,5.83635 17.4621,5.87385 16.8996,6.47985 L10.7091,13.16385 L6.9891,9.90435 C6.3651,9.35535 5.4156,9.42135 4.8726,10.04385 C4.3251,10.66635 4.3881,11.61435 5.0106,12.16035 L9.8286,16.38135 C10.1136,16.63035 10.4661,16.75335 10.8171,16.75335 C11.2206,16.75335 11.6241,16.59135 11.9181,16.27335 L19.1001,8.51985 C19.6641,7.91085 19.6281,6.96285 19.0191,6.40035 Z" id="Combined-Shape" fill="#111111"></path>
                      </svg>Done
                      </span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                    <li><a class="dropdown-item" href="#">Undo Mark Complete</a></li>
                  </ul>
                </div>
              </div>
              <div class="text-muted">Oct 21, 2019 • 9:00 am</div>
              <div class="dropdown">
                <button class="btn btn-more dropdown-toggle m-0 pe-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                </button>
                <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                  <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Action Item 4</a></li>
                </ul>
              </div>
            </div>
            <div class="w-100 mb-2">
              This is some content from a media component. You can replace this with any content and adjust it as needed.
            </div>
            <button class="btn btn-link">Reply</button>
          </div><!--notes-body-->
        </div><!--notes-->

        <div class="notes mt-3">
          <div class="notes-body">
            <div class="d-flex align-items-center">
              <div class="d-flex align-items-center flex-grow-1">
                <span class="fw-bold me-1">Jeremiah Haught</span>
                <div class="dropdown">
                  <button class="btn btn-link m-0 p-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="badge me-1 badge-danger">
                      <svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M11.9899936,17.6323846 C11.2046777,17.6323846 10.604142,17.0317707 10.604142,16.2463526 C10.604142,15.4609344 11.2046777,14.8603205 11.9899936,14.8603205 C12.7753095,14.8603205 13.3758451,15.4609344 13.3758451,16.2463526 C13.3758451,17.0317707 12.7753095,17.6323846 11.9899936,17.6323846 Z M13.3758451,13.4742885 C13.3758451,13.7514949 13.1910649,13.9362991 12.9138946,13.9362991 L11.0660925,13.9362991 C10.7889222,13.9362991 10.604142,13.7514949 10.604142,13.4742885 L10.604142,7.46814957 C10.604142,7.19094316 10.7889222,7.00613889 11.0660925,7.00613889 L12.9138946,7.00613889 C13.1910649,7.00613889 13.3758451,7.19094316 13.3758451,7.46814957 L13.3758451,13.4742885 Z" id="Shape" fill="#111111" fill-rule="nonzero"></path>
                      </svg>Action Required
                    </span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                    <li><a class="dropdown-item" href="#">Mark Complete</a></li>
                  </ul>
                </div>
              </div>
              <div class="text-muted">Oct 21, 2019 • 9:00 am</div>
              <div class="dropdown">
                <button class="btn btn-more dropdown-toggle m-0 pe-0" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                </button>
                <ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
                  <li><a class="dropdown-item" href="#">Action Item 1</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 2</a></li>
                  <li><a class="dropdown-item" href="#">Action Item 3</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Action Item 4</a></li>
                </ul>
              </div>
            </div>
            <div class="w-100 mb-2">
              This is some content from a media component. You can replace this with any content and adjust it as needed.
            </div>
            <button class="btn btn-link">Reply</button>
          </div><!--notes-body-->
        </div><!--notes-->

      </div><!--card-body-->
    </div>
</div>