Link

Customer Stories

Customer stories typically appear in a carousel format. They showcase which GitHub customer use a partitcular product or service, and link to each of their in-depth profiles in the Customer Stories section of the site.



Usage


Rails

<%= render "site/customer-story",
  company: "Spotify",
  company_id: "spotify",
  logo_height: "x",
  ga_page: "Enterprise",
  active: "true"
%>


Variable Description
company The full formal name of the company featured in the case study.
company_id The lowercase shorthand for the company. To be used for slugs, image names, etc. Must align with the Customer Story URL for the company in order for the link to work properly.
logo_height Custom height of the company logo. If no customer height is needed, the value should be x.
name (Optional) The name of the person giving the testimonial. If no name is provided, the value should be x.
ga_page The title of the page in which the customer stories are appearing. This value will be passed as part of the Google Analytics click tracking.
active Indicates whether or not a given customer story card should be the “active” card when the carousel loads. Values here should either be true or x. Note that each carousel should only start with one card marked as active.

Context

Customer story cards are rarely used on their own; typically, they appear in the context of a carousel. To render a full functional carousel, a set of customer story cards needs to be written in the following context, with wrapper divs and a carousel navigation partial.

Note that only the middle card is set to be active. All other cards are inactive until the user interacts with the carousel.

<div class="d-flex flex-nowrap gutter-fluid gutter-lg-spacious-fluid mb-8-fluid position-relative">
  <div class="d-flex flex-nowrap gutter-fluid gutter-lg-spacious-fluid customer-story-carousel js-customer-story-offset">
    <%= render "site/customer-story",
      company: "Stripe",
      company_id: "stripe",
      logo_height: "2rem",
      ga_page: "Enterprise",
      active: "x"
    %>

    <%= render "site/customer-story",
      company: "Arduino",
      company_id: "arduino",
      logo_height: "3rem",
      ga_page: "Enterprise",
      active: "x"
    %>

    <%= render "site/customer-story",
      company: "Spotify",
      company_id: "spotify",
      logo_height: "x",
      ga_page: "Enterprise",
      active: "true"
    %>

    <%= render "site/customer-story",
      company: "Ford",
      company_id: "ford",
      logo_height: "2rem",
      ga_page: "Enterprise",
      active: "x"
    %>

    <%= render "site/customer-story",
      company: "Dow Jones",
      company_id: "dow-jones",
      logo_height: "2.5rem",
      ga_page: "Enterprise",
      active: "x"
    %>
  </div>
  <%= render "site/customer-story-nav" %>
</div>