Davidson Styleguide

Block Components: Contact Table 

<div class="block ">
    <div class="block__header">
        <div class="section-intro">
            <h2 class="headline-group ">

                <span class="headline-group__head">Headline</span>
                <span class="headline-group__sub">Optional Subhead</span>
            </h2>

            <p class="intro">
                Intro text is larger than standard paragraph text and should be pretty short.
            </p>
        </div>
    </div>
    <div class="block__content">
        <table class="contact-table">
            <caption class="show-for-sr">Human Vitals</caption>
            <tbody>
                <tr class="contact-table__row contact-table__row--name">
                    <th scope="row">Name</th>
                    <td>Alfred E. Newman</td>
                </tr>
                <tr class="contact-table__row contact-table__row--jobtitle">
                    <th scope="row">Job Title</th>
                    <td>Associate Professor</td>
                </tr>
                <tr class="contact-table__row contact-table__row--orgunit">
                    <th scope="row">College or Department</th>
                    <td><a href="http://www.example.com" class="">College of Paper Folding Puzzles</a></td>
                </tr>
                <tr class="contact-table__row contact-table__row--office">
                    <th scope="row">Office Number</th>
                    <td>347 Donner Bldg.</td>
                </tr>
                <tr class="contact-table__row contact-table__row--phone">
                    <th scope="row">Phone Number</th>
                    <td><a href="tel:15555551212" class="">555-555-1212</a></td>
                </tr>
                <tr class="contact-table__row contact-table__row--email">
                    <th scope="row">Email</th>
                    <td><a href="mailto:newman@example.com" class="">newman@example.com</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 
{% include '@block' %}
 
{
  "block": {
    "pattern": "@contact-table",
    "section_intro": {
      "hg": {
        "super": null,
        "headline": "Headline",
        "sub": "Optional Subhead",
        "tag": "h2"
      },
      "p": {
        "content": "Intro text is larger than standard paragraph text and should be pretty short.",
        "variant": "intro"
      },
      "link": null
    }
  },
  "pulltext": {
    "pattern": "@p",
    "p": {
      "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
    }
  },
  "contact_table": {
    "fields": [
      {
        "slug": "name",
        "label": "Name",
        "content": "Alfred E. Newman"
      },
      {
        "slug": "jobtitle",
        "label": "Job Title",
        "content": "Associate Professor"
      },
      {
        "slug": "orgunit",
        "label": "College or Department",
        "content": {
          "title": "College of Paper Folding Puzzles",
          "url": "http://www.example.com"
        }
      },
      {
        "slug": "office",
        "label": "Office Number",
        "content": "347 Donner Bldg."
      },
      {
        "slug": "phone",
        "label": "Phone Number",
        "content": {
          "title": "555-555-1212",
          "url": "tel:15555551212"
        }
      },
      {
        "slug": "email",
        "label": "Email",
        "content": {
          "url": "mailto:newman@example.com",
          "title": "newman@example.com"
        }
      }
    ],
    "caption": "Human Vitals"
  }
}

There are no notes for this item.