Item Details Page

A layout intended to group various aspects about something for easy, glanceability.

On this page:

Best Practices

  • Put the most apparent information about the item at the top.
  • Use a photo if you have one.
  • Group the attributes about the item into separate cards.
  • Arrange the attributes so that most often sought information is higher at the top.

Usage

Go to Internal Preview

<!-- Place an appropriate title for the page here -->
<div class="content-container">
  <div class="container-fluid" role="group" aria-labelledby="form-section-01-description">
    <div class="row">
      <div class="col-12">
        <h2>Basic Info</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-3 mb-3">
        <img src="https://i.ibb.co/M83JTps/image-2.png" alt="" class="img-fluid">
      </div>
      <div class="col-12 col-lg-9">
        <div class="row">
          <div class="col-12">
            <div class="form-group">
              <p class="label">Program Function</p>
              <p>Miscelleneous Sales</p>
            </div>
          </div>
          <div class="col-12 col-lg-2">
            <div class="form-group">
              <p class="label">Item No.</p>
              <p>1234</p>
            </div>
          </div>
          <div class="col-12 col-lg-10">
            <div class="form-group">
              <p class="label">Item Name</p>
              <p>ItemNameHere</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h3 class="legend">Identifying Info</h3>
          <div class="row">
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Serial Prefix</p>
                <p>SPA-</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Serial Digit Length</p>
                <p>3</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Serial Postfix</p>
                <p>-XYZ</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h3 class="legend">Linked Capabilities</h3>
          <div class="h6">
            <span class="badge badge-ui">Capability Name</span>
            <span class="badge badge-ui">Capability</span>
            <span class="badge badge-ui">Name</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h3 class="legend">Pricing Info</h3>
          <div class="row">
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Sales Price</p>
                <p>$999.99</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Effective Date</p>
                <p>12 / 12 / 2088</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Serial Postfix</p>
                <p>-XYZ</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6 mb-3">
      <div class="card h-100">
        <div class="card-body">
          <h3 class="legend">Inventory Lifespan</h3>
          <div class="row">
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Shelf Life</p>
                <p>24 Months</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Effective Date</p>
                <p>12 / 12 / 2088</p>
              </div>
            </div>
            <div class="col-6 col-lg-4">
              <div class="form-group">
                <p class="label">Expiration Date</p>
                <p>12 / 12 / 2088</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Next page