Missouri State University Pattern Library

People

There are no notes for this item.

<article class="AbstractList ContentBlock Page10">
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="bearPassId.aspx">
                    <img src="http://picsum.photos/500/600?random&#x3D;1" alt="Full name" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="bearPassId.aspx">Full name</a>
                    </h2>
                    <p class="JobTitle">Job title</p>
                    <div class="Contact">
                        <a href="mailto:bearPassId@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>bearPassId@missouristate.edu</a>
                        <a href="tel:417-836-5000">
                                <span class="content_icon_sprites phone_icon"></span>417-836-5000</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="bearPassId.aspx">
                    <img src="http://picsum.photos/500/600?random&#x3D;2" alt="Full name" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="bearPassId.aspx">Full name</a>
                    </h2>
                    <p class="JobTitle">Job title</p>
                    <div class="Contact">
                        <a href="mailto:bearPassId@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>bearPassId@missouristate.edu</a>
                        <a href="tel:417-836-5000">
                                <span class="content_icon_sprites phone_icon"></span>417-836-5000</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="ProfileAbstract">
        <div class="AbstractImage">
            <a href="bearPassId.aspx">
                    <img src="http://picsum.photos/500/600?random&#x3D;3" alt="Full name" width="60">
                </a>
        </div>
        <div class="AbstractInfo">
            <div class="ContactInfoContainer">
                <div class="ContactInfo">
                    <h2>
                        <a class="NameLink" href="bearPassId.aspx">Full name</a>
                    </h2>
                    <p class="JobTitle">Job title</p>
                    <div class="Contact">
                        <a href="mailto:bearPassId@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>bearPassId@missouristate.edu</a>
                        <a href="tel:417-836-5000">
                                <span class="content_icon_sprites phone_icon"></span>417-836-5000</a>
                    </div>
                </div>
            </div>
            <div class="AbstractContainer">
                <div class="Abstract">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!</p>
                </div>
            </div>
        </div>
    </div>
</article>
 
<article class="AbstractList ContentBlock Page{{pageId}}">
    {{#each personItemContainer}}
        {{! NOTE: This is a static version that deviates from the Web Press template }}
        <div class="ProfileAbstract">
            <div class="AbstractImage">
                <a href="{{bearPassId}}.aspx">
                    <img src="{{path photo}}" alt="{{name}}" width="60">
                </a>
            </div>
            <div class="AbstractInfo">
                <div class="ContactInfoContainer">
                    <div class="ContactInfo">
                        <h2>
                            <a class="NameLink" href="{{bearPassId}}.aspx">{{name}}</a>
                        </h2>
                        <p class="JobTitle">{{jobTitle}}</p>
                        <div class="Contact">
                            <a href="mailto:{{bearPassId}}@missouristate.edu">
                                <span class="content_icon_sprites email_icon"></span>{{bearPassId}}@missouristate.edu</a>
                            <a href="tel:{{phone}}">
                                <span class="content_icon_sprites phone_icon"></span>{{phone}}</a>
                        </div>
                    </div>
                </div>
                <div class="AbstractContainer">
                    <div class="Abstract">
                    <p>{{abstract}}</p>
                    </div>
                </div>
            </div>
        </div>
    {{/each}}
</article>
 
{
  "pageId": 10,
  "headline": "Lorem ipsum dolor sit amet consectetur",
  "publishAspx": null,
  "headingText": "Lorem ipsum dolor",
  "headingLevel": null,
  "personItemContainer": [
    {
      "bearPassId": "bearPassId",
      "name": "Full name",
      "jobTitle": "Job title",
      "phone": "417-836-5000",
      "photo": "http://picsum.photos/500/600?random=1",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    },
    {
      "bearPassId": "bearPassId",
      "name": "Full name",
      "jobTitle": "Job title",
      "phone": "417-836-5000",
      "photo": "http://picsum.photos/500/600?random=2",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    },
    {
      "bearPassId": "bearPassId",
      "name": "Full name",
      "jobTitle": "Job title",
      "phone": "417-836-5000",
      "photo": "http://picsum.photos/500/600?random=3",
      "abstract": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolorum autem porro expedita repellat voluptas!"
    }
  ]
}