novo-elements/demo/pages/design/composition/Composition.html

Bullhorn's NOVO Element Repository for Angular 2

<header class="design container">
    <div>
        <h1 class="title">Composition</h1>
        <h2 class="sub-title">A universal language</h2>
        <p class="description">
            Comprehensive design principles and language helps maintain
            usability and a sense of harmony across a large family
            of products. Consistency and common elements greatly
            reduce the user effort requred to learn a new interface.
        </p>
    </div>
    <img src="assets/images/CompositionPageIcon.svg" alt=""/>
</header>

<section class="design container">
    <h2>Mainframe</h2>
    <p>
        The Mainframe refers to the permanently fixed portions of
        the application that never change. It contains the primary
        navigation and core functions.
    </p>

    <aside class="design-principle" style="margin-top: 60px;">
        <h6>Design Principles:
            <span>Hierarchy &amp; Unity</span>
        </h6>
        <p>
            Unity implies relation through proximity, size, and color.
            Making elements clearly distinct or unified helps
            create a strong visual hierarchy. This is important
            because it helps to easily differentiate the level
            of importance between different elements, and controls
            a user's cognitive flow.
        </p>
    </aside>

    <article>
        <h5>Top Frame</h5>
        <p>
            The top frame contains key functions (Find, Add) and navigation
            to the Resource Center and to User Profile options.
        </p>
        <img src="assets/images/LayoutMainframeTopFrame.svg" alt="mainframe"/>
    </article>

    <article>
        <h5>Bowling Alley</h5>
        <p>
            The bowling alley is where all active items are displayed, allowing
            users to easily shift between them.
        </p>
        <img class="bowling-alley" src="assets/images/LayoutMainframeBowlingAlley.svg" alt="bowling alley"/>
    </article>

    <article>
        <h5>Menu</h5>
        <p>
            The menu functions as the primary navigation for the application.
            It contains links to every list, the dashboard, admin
            functions, tools, and third-party applications. The
            items on the menu can be toggled, grouped, and organized
            however the user wishes.
        </p>
        <img class="menu" src="assets/images/LayoutMainframeMenu.svg" alt="menu"/>
    </article>

    <h2>Headers</h2>
    <p>
        Headers hold key information and controls for a page. They serve
        as a wayfinding marker to help the user understand context
        and easily access important actions.
    </p>

    <article>
        <h5>Overviews &amp; Slideouts</h5>
        <p>
            Overview and Slideout headers are dominant features which focus
            the user's attention to the context of a particular
            record and contains key information on the left,
            and actions on the right. These headers inherit the
            color of the entity type.
        </p>
        <img src="assets/images/LayoutMainframeHeaderOverview.svg" alt="overview header"/>
    </article>

    <article>
        <h5>List Headers</h5>
        <p>
            List headers contain the filter and column controls for the list
            and the primary actions. They are fixed so that results
            can eaily be modified and actioned regardless of
            scrolling position.
        </p>
        <img src="assets/images/LayoutMainframeHeaderList.svg" alt="list header"/>
    </article>

    <aside class="design-principle">
        <h6>Design Principles:
            <span>Navigation &amp; Consistency</span>
        </h6>
        <p>A consistent navigation structure allows users to master
            an interface much more quickly, as they know that
            certain functions are always in the same place. We
            use headers to provide quick access to key functions
            and aid findability of data in a complex system.
        </p>
    </aside>

    <article>
        <h5>Add &amp; Edit Pages</h5>
        <p>
            The headers of Add and Edit pages generally serve as a simple
            visual element to help provide context.
        </p>
        <img src="assets/images/LayoutMainframeHeaderEditPage.svg" alt="add page header"/>
    </article>

    <h2>Cards</h2>
    <p>
        Essential to our design paradigm, cards are independent blocks
        of information. They can contain text, tables, and data
        visualizations. They offer a curated view of data. Bringing
        the most pertinent information to the forefont, they
        allow users to scan large amounts of data quickly.
    </p>

    <article>
        <h5>Basic Structure</h5>
        <p>
            Cards have a header which contains the card title and the card
            controls. The controls can vary depending on card
            type, gut generally include move, refresh, configure,
            and remove. The content area has padding by default
            but can also run edge-to-edge. Pulse cards have a
            special icon next to the title.
        </p>
        <img src="assets/images/LayoutMainframeCardsNPSCard.svg" alt="card"/>
    </article>

    <aside class="design-principle">
        <h6>Design Principle:
            <span>Cards</span>
        </h6>
        <p>
            The card system scales easily, both in individual size
            and in groups. Because of this, cards are essential
            to our design language. Cards balance and align very
            easily, promoting findability. These handy little
            containers also provide a contextually relevant home
            for all content.
        </p>
        <div class="hint">
            <span>
                <i class="bhi-idea"></i>
                <strong>Hint: </strong>This is a great place for third-party
                developers to fit into the Bullhorn system.
            </span>
            <a class="link" routerLink="/cards">
                <i class="bhi-link"></i>
                <strong>Are you a developer?</strong> Check out card
                markup and documentation here
            </a>
        </div>
    </aside>

    <article>
        <h5>Dashboard &amp; Overviews</h5>
        <p>
            Dashboards and Records Overviews are the primary home for our
            cards. They offer a customizable workspace to arrange
            and configure to most appropriately fit the user's
            needs. Cards have a fixed height, but mildly flexible
            width. They can also be expanded to full-screen.
            The "add card" control is always located in the top
            right, to be consistent with the placement of action
            buttons on tables and lists.
        </p>
        <img class="dashboard" src="assets/images/LayoutMainframeCardsDashboard.svg" alt="dashboard cards"/>
    </article>

    <article>
        <h5>Slideouts and Mobile</h5>
        <p>
            Cards are so flexible, they also work well in a mobile setting.
            They help users to easily scan chunks of information
            and find what they need.
        </p>
        <img class="mobile" src="assets/images/LayoutMobileCard.svg" alt="mobile cards"/>
    </article>
</section>