Reactive Graph - Design System

Details: Default 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Details

    </h1>
    <hr>
    <h3 class="celestial-blue">Regular</h3>
    <div style="padding: var(--size-4);">
        <details>
            <summary>The summary</summary>
            <article>
                <p class="first-graph">
                    Reporters hoping to evade other forms of surveillance by meeting in person with a source might want to rethink that practice. Every major newsroom
                    covered by the data contained dozens of pings; we easily traced one Washington Post journalist through Arlington, Va.
                </p>
                <p>
                    In other cases, there were detours to hotels and late-night visits to the homes of prominent people. One person, plucked from the data in Los Angeles
                    nearly at random, was found traveling to and from roadside motels multiple times, for visits of only a few hours each time.
                </p>
                <p class="first-graph">
                    While these pointillist pings don’t in themselves reveal a complete picture, a lot can be gleaned by examining the date, time and length of time at
                    each point.
                </p>
                <p>
                    Large data companies like Foursquare — perhaps the most familiar name in the location data business — say they don’t sell detailed location data like
                    the kind reviewed for this story but rather use it to inform analysis, such as measuring whether you entered a store after seeing an ad on your mobile
                    phone.
                </p>
            </article>
        </details>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Details
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Regular</h3>
  <div style="padding: var(--size-4);">
    <details {{#if modifier}}class="{{modifier}}"{{/if}}>
      <summary>The summary</summary>
      <article>
        <p class="first-graph">
          Reporters hoping to evade other forms of surveillance by meeting in person with a source might want to rethink that practice. Every major newsroom
          covered by the data contained dozens of pings; we easily traced one Washington Post journalist through Arlington, Va.
        </p>
        <p>
          In other cases, there were detours to hotels and late-night visits to the homes of prominent people. One person, plucked from the data in Los Angeles
          nearly at random, was found traveling to and from roadside motels multiple times, for visits of only a few hours each time.
        </p>
        <p class="first-graph">
          While these pointillist pings don’t in themselves reveal a complete picture, a lot can be gleaned by examining the date, time and length of time at
          each point.
        </p>
        <p>
          Large data companies like Foursquare — perhaps the most familiar name in the location data business — say they don’t sell detailed location data like
          the kind reviewed for this story but rather use it to inform analysis, such as measuring whether you entered a store after seeing an ad on your mobile
          phone.
        </p>
      </article>
    </details>
  </div>
</div>
 
{
  "modifier": ""
}

No notes defined.