Icon pillars
Icon pillars are a commonly used pattern in GitHub’s marketing pages. Each is a vertically stacked group consisting of an icon, a heading, some paragraph text, and sometimes a link. They typically appear in groups of three or four.
Usage
Rails
<%= render "site/icon-pillar",
total_items: "3",
icon: "services-integrations",
color: "purple",
heading: "Top integrations",
text: "Use your favorite IDEs, cloud platforms, and more.",
link_text: "Browse Marketplace",
link_url: "/marketplace",
link_ga_source: "Enterprise Services section",
classes: "target-enterprise-services-2"
%>
| Variable | Description |
|---|---|
total_items | The number of icons pillars appearing in a given section. The values are current set for either 3 or 4. The number entered will change the responsive sizing of each item. |
icon | The filename of the icon being shown. |
color | The color scheme appearing behind the icon. Values should either be blue or purple. |
heading | The heading text. |
text | The paragraph text. |
link_text | Text to be shown in the link, if there is one. If not, the value should be x. |
link_url | The URL the link should go to, if there is one. If not, the value should be x. |
link_ga_source | The page/section source attribute you wish to be passed to Google Analytics click tracking. If not, the value should be x. |
classes | Any additional classes you wish to be passed to the pillar. A typical use case might be classes used for JS animations. |
Context
Individual icon pillars still need to be wrapped in a parent flex container. It’s important to set the flex parent to flex-wrap and also specify any gutter styles.
<div class="d-flex flex-wrap gutter-fluid gutter-lg-spacious-fluid">
<%= render "site/icon-pillar",
total_items: "3",
icon: "services-24-7",
color: "purple",
heading: "24/7 support",
text: "Get help whenever you need it from our always-on team.",
link_text: "See support options",
link_url: "/premium-support",
link_ga_source: "Enterprise Services section",
classes: "x"
%>
<%= render "site/icon-pillar",
total_items: "3",
icon: "services-integrations",
color: "purple",
heading: "Top integrations",
text: "Use your favorite IDEs, cloud platforms, and more.",
link_text: "Browse Marketplace",
link_url: "/marketplace",
link_ga_source: "Enterprise Services section",
classes: "target-enterprise-services-2"
%>
<%= render "site/icon-pillar",
total_items: "3",
icon: "services-learning",
color: "purple",
heading: "Developer-led learning",
text: "Help your team level up their skills in the same place they code.",
link_text: "Explore Learning Lab",
link_url: "https://lab.github.com",
link_ga_source: "Enterprise Services section",
classes: "target-enterprise-services-3"
%>
</div>