Item Details 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.
• Be sure to adjust heading levels as appropriate.

Usage

See Internal Preview

<!-- Place an appropriate title for the page here -->
<div class="content-container">
  <div class="container-fluid" role="group">
    <div class="row">
      <div class="col-12">
        <h2 class="legend">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">
          <h2 class="legend">Identifying Info</h2>
          <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">
          <h2 class="legend">Linked Capabilities</h2>
          <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">
          <h2 class="legend">Pricing Info</h2>
          <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">
          <h2 class="legend">Inventory Lifespan</h2>
          <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>