components

Synopsis

Provides a brief summary or outline of the content on a News or Feature Story page.
  • Story highlights
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    • Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    • Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
    <div class="lp__synopsis parbase section">
    <div id="lp__synopsis-body">
        <h5>Story highlights</h5>
        <div class="lp__synopsis-text">
            <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li>
            </ul>
        </div>
        <div class="lp__synopsis-text">
            <ul>
            <li>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
            </ul>
        </div>
        <div class="lp__synopsis-text">
            <ul>
            <li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</li>
            </ul>
        </div>
    </div>
</div>
  • Use:

    To summarize body text that is long enough that "scanning" the page is insufficient. This is almost exclusively used for news type content pages


    Don’t Use:

    To provide any information that is not present in publication being summarized.


    Visual Style:

    A synopsis should be placed before any other text on the page after the banner. An image or video may be placed above the Synopsis, but the beginning of the synopsis should be visible above the fold. There should be no other components placed between the synopsis and the beginning of the body text so that the connection between the two is apparent.


    Editorial

    A synopsis should only represent a summary of the existing content of the publication, without embellishment or editorializing. Synopses can be presented as either a contiguous sentence or paragraph, or as a collection of bullet points. If possible, it is suggested to use bullets when the synopsis is longer than a single sentence. This maximises expediency and readability for the user. Additionally, synopses should be kept as short as is reasonably possible. If the synopsis takes longer than 10 seconds to read, it is likely too long.

  • News, Feature Story:

    This Feature Story is a good example of a brief and easily consumable bulleted synopsis.
  • Story highlights
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
    <div class="lp__synopsis parbase section">
    <div id="lp__synopsis-body">
        <h5>Story highlights</h5>
        <div class="lp__synopsis-text">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
        </div>
    </div>
</div>
  • In cases where the article or story has a single focal point or a less data-driven, naritive focus it is a an option to have a single unbroken synopsis. Synopses should be kept as short as is reasonably possible, if the it takes longer than 15 seconds to read it is likely too long.
  • Results Brief:

    This Brief employs a single paragraph for the synopsis rather than Bullets because it better fits the less data driven, more narative driven content of the Brief.