Social posts Dashkit only

A variation of the card component featuring Dashkit comments.

...

Dianna Smiley

Action Another action Something else here

I've been working on shipping the latest version of Launchday. The story I'm trying to focus on is something like "You're launching soon and need to be 100% focused on your product. Don't lose precious days designing, coding, and testing a product site. Instead, build one in minutes."

What do you y'all think? Would love some feedback from @Ab or @Adolfo?

...

😬 1 👍 2 Add Reaction
... ... ... ...
Share
...
Ab Hadley

Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really show me what the product does? I think using a short looping video or something similar demo'ing the product might be better?

...
Adolfo Hess

Any chance you're going to link the grid up to a public gallery of sites built with Launchday?

... 
<div class="card">
  <div class="card-body">

    <!-- Header -->
    <div class="mb-3">
      <div class="row align-items-center">
        <div class="col-auto">

          <!-- Avatar -->
          <a href="#!" class="avatar">
            <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Title -->
          <h4 class="mb-1">
            Dianna Smiley
          </h4>

          <!-- Time -->
          <p class="card-text small text-body-secondary">
            <span class="fe fe-clock"></span> <time datetime="2018-05-24">4hr ago</time>
          </p>

        </div>
        <div class="col-auto">

          <!-- Dropdown -->
          <div class="dropdown">
            <a href="#" class="dropdown-ellipses dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fe fe-more-vertical"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <a href="#!" class="dropdown-item">
                Action
              </a>
              <a href="#!" class="dropdown-item">
                Another action
              </a>
              <a href="#!" class="dropdown-item">
                Something else here
              </a>
            </div>
          </div>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Text -->
    <p class="mb-3">
      I've been working on shipping the latest version of Launchday. The story I'm trying to focus on is something like "You're launching soon and need to be 100% focused on your product. Don't lose precious days designing, coding, and testing a product site. Instead, build one in minutes."
    </p>

    <p class="mb-4">
      What do you y'all think? Would love some feedback from <a href="#!" class="badge bg-primary-subtle">@Ab</a> or <a href="#!" class="badge bg-primary-subtle">@Adolfo</a>?
    </p>

    <!-- Image -->
    <p class="text-center mb-3">
      <img src="../assets/img/posts/post-1.jpg" alt="..." class="img-fluid rounded">
    </p>

    <!-- Buttons -->
    <div class="mb-3">
      <div class="row">
        <div class="col">

          <a href="#!" class="btn btn-sm btn-white">
            �� 1
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            �� 2
          </a>
          <a href="#!" class="btn btn-sm btn-white">
            Add Reaction
          </a>

        </div>
        <div class="col-auto me-n3">

          <!-- Avatar group -->
          <div class="avatar-group d-none d-sm-flex">
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-4.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
            <a href="profile-posts.html" class="avatar avatar-xs">
              <img src="../assets/img/avatars/profiles/avatar-5.jpg" alt="..." class="avatar-img rounded-circle">
            </a>
          </div>

        </div>
        <div class="col-auto">

          <!-- Button -->
          <a href="#!" class="btn btn-sm btn-white">
            Share
          </a>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Divider -->
    <hr>

    <!-- Comments -->
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.html">
            <img src="../assets/img/avatars/profiles/avatar-2.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Ab Hadley
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

              </div>
            </div> <!-- / .row -->

            <!-- Text -->
            <p class="comment-text">
              Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really <em>show</em> me what the product does? I think using a short looping video or something similar demo'ing the product might be better?
            </p>

          </div>

        </div>
      </div> <!-- / .row -->
    </div>
    <div class="comment mb-3">
      <div class="row">
        <div class="col-auto">

          <!-- Avatar -->
          <a class="avatar" href="profile-posts.html">
            <img src="../assets/img/avatars/profiles/avatar-3.jpg" alt="..." class="avatar-img rounded-circle">
          </a>

        </div>
        <div class="col ms-n2">

          <!-- Body -->
          <div class="comment-body">

            <div class="row">
              <div class="col">

                <!-- Title -->
                <h5 class="comment-title">
                  Adolfo Hess
                </h5>

              </div>
              <div class="col-auto">

                <!-- Time -->
                <time class="comment-time">
                  11:12
                </time>

              </div>
            </div> <!-- / .row -->

            <!-- Text -->
            <p class="comment-text">
              Any chance you're going to link the grid up to a public gallery of sites built with Launchday?
            </p>

          </div>

        </div>
      </div> <!-- / .row -->
    </div>

    <!-- Divider -->
    <hr>

    <!-- Form -->
    <div class="row">
      <div class="col-auto">

        <!-- Avatar -->
        <div class="avatar avatar-sm">
          <img src="../assets/img/avatars/profiles/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>

      </div>
      <div class="col ms-n2">

        <!-- Input -->
        <form class="mt-1">
          <label class="visually-hidden">Leave a comment...</label>
          <textarea class="form-control form-control-flush" data-bs-toggle="autosize" rows="1" placeholder="Leave a comment"></textarea>
        </form>

      </div>
      <div class="col-auto align-self-end">

        <!-- Icons -->
        <div class="text-body-secondary mb-2">
          <a class="text-reset me-3" href="#!" data-bs-toggle="tooltip" title="Add photo">
            <i class="fe fe-camera"></i>
          </a>
          <a class="text-reset me-3" href="#!" data-bs-toggle="tooltip" title="Attach file">
            <i class="fe fe-paperclip"></i>
          </a>
          <a class="text-reset" href="#!" data-bs-toggle="tooltip" title="Record audio">
            <i class="fe fe-mic"></i>
          </a>
        </div>

      </div>
    </div> <!-- / .row -->

  </div>
</div>