FYI

Default

The FYI component is intended to highlight a related or alternative product to the customer. Should only be used once per page. Pairs well with a Product Mention.

<aside class="FYI ">
  <div class="FYI-intro">
    <div class="Grid">
      <div class="Grid-cell u-sizeFit u-spaceRight03 u-pullLeft06">
        <svg width="25" height="28" viewBox="0 0 25 28" class="Icon Icon--block u-textGrow1 u-textDarkGray">
          <path d="M12.5 1.6C5.6 1.6 0 7.2 0 14.1s5.6 12.5 12.5 12.5S25 21 25 14.1 19.4 1.6 12.5 1.6zm-1.9 5.6c0-.5.4-.8.8-.8h2.1c.5 0 .8.4.8.8v1.5c0 .5-.4.8-.8.8h-2c-.5 0-.8-.4-.8-.8V7.2zM16 20.9c0 .5-.4.8-.8.8h-3.1-.1-2.2c-.5 0-.8-.4-.8-.8v-1.5c0-.5.4-.8.8-.8h.9v-4.3h-.9c-.5 0-.8-.4-.8-.8V12c0-.5.4-.8.8-.8h3.8c.5 0 .8.4.8.8v6.6h.9c.5 0 .8.4.8.8l-.1 1.5z" />
        </svg>
      </div>
      <div class="Grid-cell u-sizeFill">
        <p class="u-textShrink1">There is a version of this project with <b>some feature®</b>, which might be a better fit?</p>
      </div>
    </div>
  </div>
  <div class="FYI-subject">
    <article class="ProductMention ProductMention--small ProductMention--reverse u-textShrink1">
      <div class="ProductMention-content">
        <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
        <p class="ProductMention-meta u-textDarkGray">
          Model #74158
        </p>
      </div>
      <img class="ProductMention-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
</article>
  </div>
</aside>

With Detail

An FYI component may optionally include a "detail" section when more information is necessary.

<aside class="FYI FYI--withDetail">
  <div class="FYI-intro">
    <h2 class="u-textSize1 u-textWeightBold">There is a version of this project with some feature®</h2>
  </div>
  <div class="FYI-subject">
    <article class="ProductMention ProductMention--reverse u-textShrink1">
      <div class="ProductMention-content">
        <h3 class="ProductMention-heading u-textGrow1">
      <a class="ProductMention-primaryAction " href="#">
        Default Product Name
      </a>
    </h3>
        <p class="ProductMention-meta u-textDarkGray">
          Model #74769
        </p>
        <div class="ProductMention-extra">
          (Rating, etc.)

        </div>
      </div>
      <img class="ProductMention-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20dy%3D%2216%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
</article>
  </div>
  <div class="FYI-detail">
    <p class="u-textShrink1 u-textDarkGray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur neque nec eros porttitor, ut suscipit mauris aliquam.</p>

  </div>
</aside>