Defining the HTML

The HTML of the "Person Context Panel Widget" is the output of the photograph and details widgets combined by placing them in the cells of a HTML table to lay them out horizontally.

Figure 1. HTML Output of the Person Context Panel Widget

<table class="sample-container">
  <tbody>
    <tr>
      <td>
        <!-- HTML of photograph widget goes here -->
      </td>
      <td>
        <!-- HTML of details widget goes here -->
      </td>
    </tr>
  </tbody>
</table>

The CSS class sample-container is unused in this example, but it is still a good practice to always provide a CSS class on the root element of a widget to allow for customization of the contents within it. For example, the root element of the photograph widget has a CSS class of photo-container. If necessary, the photograph widget could be customized specifically when it is contained within the table shown above as follows:

.sample-container .photo-container {
/* customization of photograph widget styles */
}