\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Kiran Patil (kpatil)}
\pdfinfo{
  /Title (sxa-renderings.pdf)
  /Creator (Cheatography)
  /Author (Kiran Patil (kpatil))
  /Subject (SXA Renderings Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{006F7C}
\definecolor{LightBackground}{HTML}{EFF6F6}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{SXA Renderings Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Kiran Patil (kpatil)} via \textcolor{DarkBackground}{\uline{cheatography.com/20093/cs/22681/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Kiran Patil (kpatil) \\
  \uline{cheatography.com/kpatil} \\
        \uline{\seqsplit{sitecorebasics}.wordpress.com/}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 6th May, 2020.\\
   Updated 6th May, 2020.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{4}

\begin{tabularx}{3.833cm}{p{0.3033 cm} x{1.36485 cm} x{1.36485 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Composites}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Accordion} & Embedded renderings can support variants & Displays collapsible panels. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{Carousel} & Embedded renderings can support variants & Displays set of slides that can contain images, videos, links, and text. \tn 
% Row Count 7 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Flip & Embedded renderings can support variants & Displays two sides that both have a title and a content rendering. \tn 
% Row Count 11 (+ 4)
% Row 3
\SetRowColor{white}
Tabs & Embedded renderings can support variants & Adds tabs to the page. \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{Snippet} & Embedded renderings can support variants & Provides placeholders to create a reusable group of renderings. \tn 
% Row Count 18 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.0299 cm} x{2.4031 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Context}}  \tn
% Row 0
\SetRowColor{LightBackground}
Language Selector & Provides a link to switch between different language versions. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Site Selector & Provides a link to switch between different tenant sites. \tn 
% Row Count 6 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.33887 cm} x{2.09413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Engagement}}  \tn
% Row 0
\SetRowColor{LightBackground}
Facebook Comments & Displays Facebook comments. \tn 
% Row Count 2 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{0.89258 cm} x{2.54042 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Events}}  \tn
% Row 0
\SetRowColor{LightBackground}
Event Calendar & Displays events from event lists or a Google calendar. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Event List & Displays lists of events with name, description, place, start/end time, and link. \tn 
% Row Count 5 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.20155 cm} x{2.23145 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Forms}}  \tn
% Row 0
\SetRowColor{LightBackground}
WFFM Wrapper & Embeds a form created using the Webforms for Marketers module. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Sitecore Forms Wrapper & Embeds a form created using the Sitecore Forms module. \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
MVC Form & After you embedded a Form module, you can add the MVC form to your page. \tn 
% Row Count 9 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.3433 cm} x{3.0897 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Maps}}  \tn
% Row 0
\SetRowColor{LightBackground}
Map & Embeds maps from Google or Bing with locations, routes, and areas that you can mark. The component can also display POI results when associated with a search results source. Points on a map can be formatted with rendering variants. \tn 
% Row Count 7 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.13289 cm} x{2.30011 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Security}}  \tn
% Row 0
\SetRowColor{LightBackground}
Login & Displays a login form. \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Logout & Displays a logout button. \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Social Login Wrapper & Embeds a Social Connected module login form on the page. \tn 
% Row Count 5 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{0.81891 cm} p{0.3033 cm} x{1.91079 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Media}}  \tn
% Row 0
\SetRowColor{LightBackground}
File List & yes & Displays list of files available for download. Supports rendering variants. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Flash & no & Embeds a SWF object on the page. \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Gallery & no & Displays a gallery of images and/or videos. \tn 
% Row Count 7 (+ 2)
% Row 3
\SetRowColor{white}
Image & yes & Adds an image that you select from the Media library to a page. \tn 
% Row Count 10 (+ 3)
% Row 4
\SetRowColor{LightBackground}
Image \seqsplit{(Reusable)} & yes & Stores image from the Media library to enable reusability. \tn 
% Row Count 13 (+ 3)
% Row 5
\SetRowColor{white}
Media Link & yes & Provides a rich link to an asset in the Media library. Includes description and preview. Supports rendering variants. \tn 
% Row Count 18 (+ 5)
% Row 6
\SetRowColor{LightBackground}
Playlist & yes & Enables you to create a playlist for the Video component. Supports rendering variants. \tn 
% Row Count 22 (+ 4)
% Row 7
\SetRowColor{white}
Video & no & Displays an HTML 5 player (with Flash fallback for legacy browsers) to play videos. \tn 
% Row Count 26 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.00089 cm} p{0.3033 cm} x{1.72881 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Page Content}}  \tn
% Row 0
\SetRowColor{LightBackground}
Field Editor & yes & Enables you to edit content fields directly in the Experience Editor. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Page Content & yes & Displays the specific fields on a page from the data source item that you select. \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Page List & yes & Displays lists of pages by predefined or composed queries. \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
Pagination & no & Adds pagination for the Page list rendering. \tn 
% Row Count 13 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Plain HTML & no & Embeds HTML code. \tn 
% Row Count 14 (+ 1)
% Row 5
\SetRowColor{white}
Plain HTML (Reusable) & no & Stores HTML code to enable reusability. \tn 
% Row Count 16 (+ 2)
% Row 6
\SetRowColor{LightBackground}
Promo & yes & Renders a field from another page and works as a placeholder for other renderings. It consists of an icon or a title and links. \tn 
% Row Count 22 (+ 6)
% Row 7
\SetRowColor{white}
Rich Text & yes & Adds formatted text on a page. You can write text using HTML tags. \tn 
% Row Count 25 (+ 3)
% Row 8
\SetRowColor{LightBackground}
Rich Text (Reusable) & yes & Stores rich text to enable reusability. \tn 
% Row Count 27 (+ 2)
% Row 9
\SetRowColor{white}
Title & yes & Displays the title or subtitle of the current page. \tn 
% Row Count 30 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.06423 cm} x{2.36877 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Social}}  \tn
% Row 0
\SetRowColor{LightBackground}
AddThis & Integrates AddThis personalized widgets. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Feed & Displays RSS and ATOM feeds. \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Social Media share & Displays social network links (Facebook, Twitter, Google+) \tn 
% Row Count 7 (+ 3)
% Row 3
\SetRowColor{white}
Twitter & Displays latest tweets posted on Twitter. \tn 
% Row Count 9 (+ 2)
% Row 4
\SetRowColor{LightBackground}
Disqus & Displays latest comments. \tn 
% Row Count 10 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.57627 cm} p{0.3033 cm} x{2.15343 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Navigation}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Archive} & yes & Displays blog archives in a tree. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\seqsplit{Breadcrumb} & no & Generates a breadcrumb that lists all path items from the root to the current item. Supports rendering variants. \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Link & yes & Adds a link to:      sibling or parent page      page from browsing history      arbitrary page or resource \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
Link List & yes & Displays lists with items that contain a title, link, and text. \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{Navigation} & no & Generates a navigation menu. You can select:      Main navigation - drop-down vertical – standard drop-down navigation      Main navigation - drop-down horizontal – drop-down navigation with child items in a single line      Sidebar navigation – all child items displayed vertically      Sitemap navigation - all child items displayed vertically      Big/fat navigation – all child items displayed horizontally.      Mobile navigation – navigation for mobile \tn 
% Row Count 30 (+ 17)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.06423 cm} x{2.36877 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Page Structure}}  \tn
% Row 0
\SetRowColor{LightBackground}
Container & Adds additional CSS styling using a wrapper for other renderings. \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Divider & Divides a placeholder horizontally. \tn 
% Row Count 5 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Edit Mode Panel & Creates a placeholder to embed other renderings that are visible to authors in Edit mode only. \tn 
% Row Count 9 (+ 4)
% Row 3
\SetRowColor{white}
IFrame & Embeds external pages. \tn 
% Row Count 10 (+ 1)
% Row 4
\SetRowColor{LightBackground}
Splitter (Columns) & Splits a placeholder horizontally. \tn 
% Row Count 12 (+ 2)
% Row 5
\SetRowColor{white}
Splitter (Rows) & Splits a placeholder vertically. \tn 
% Row Count 14 (+ 2)
% Row 6
\SetRowColor{LightBackground}
Toggle & Displays buttons or links that show additional content when toggled. \tn 
% Row Count 17 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{p{0.61794 cm} x{2.81506 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{3.833cm}}{\bf\textcolor{white}{Taxonomy}}  \tn
% Row 0
\SetRowColor{LightBackground}
Tag Cloud & Displays the aggregated tags for the search results, visually weighted based on their occurrence frequency. \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Tag List & Displays taxonomy entries that a page is tagged with. \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{3.833cm}{x{1.09188 cm} p{0.3033 cm} x{1.63782 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Search}}  \tn
% Row 0
\SetRowColor{LightBackground}
Aggregated Facet Filter & yes & Combines filters within one component. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
Facet Summary & no & Displays active filters on the page and allows visitor to remove them one by one or in bulk. \tn 
% Row Count 7 (+ 5)
% Row 2
\SetRowColor{LightBackground}
Filter (Checklist) & no & Filters search results based on selected values. \tn 
% Row Count 10 (+ 3)
% Row 3
\SetRowColor{white}
Filter (Date) & no & Filters the search results on selected date/time. \tn 
% Row Count 13 (+ 3)
% Row 4
\SetRowColor{LightBackground}
Filter (Dropdown) & no & Filters search results based on items that are tagged with a selected facet. \tn 
% Row Count 17 (+ 4)
% Row 5
\SetRowColor{white}
Filter (Managed Range) & no & Specifies the result with a minimum and maximum. \tn 
% Row Count 20 (+ 3)
% Row 6
\SetRowColor{LightBackground}
Filter (Radius) & no & Filters the search results based on distance from current user location or location provided in the Location Filter rendering. \tn 
% Row Count 26 (+ 6)
% Row 7
\SetRowColor{white}
Filter (Range Slider) & no & Filters the search results based on a facet to be less, more, or equal to the value selected by a visitor. \tn 
% Row Count 32 (+ 6)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{3.833cm}{x{1.09188 cm} p{0.3033 cm} x{1.63782 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Search (cont)}}  \tn
% Row 8
\SetRowColor{LightBackground}
Filter (Slider) & no & Filters search results based on a specific facet within the selected range. \tn 
% Row Count 4 (+ 4)
% Row 9
\SetRowColor{white}
Load More & no & Loads search results progressively. \tn 
% Row Count 6 (+ 2)
% Row 10
\SetRowColor{LightBackground}
Location Finder & no & Specifies user location. \tn 
% Row Count 8 (+ 2)
% Row 11
\SetRowColor{white}
Page Selector & no & Provides paging functionality for search results. This rendering is mutually exclusive with the Load More rendering. \tn 
% Row Count 14 (+ 6)
% Row 12
\SetRowColor{LightBackground}
Page Size & no & Enables visitors to switch the number of results displayed once. \tn 
% Row Count 18 (+ 4)
% Row 13
\SetRowColor{white}
Results Count & no & Enables you to indicate the number of results available to the visitor. \tn 
% Row Count 22 (+ 4)
% Row 14
\SetRowColor{LightBackground}
Results Variant Selector & no & Enables visitors to change the rendering variant that is used dynamically by the Search Results rendering \tn 
% Row Count 27 (+ 5)
% Row 15
\SetRowColor{white}
Search Box & yes & Filters the search results based on text provided by a visitor. \tn 
% Row Count 30 (+ 3)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{3.833cm}{x{1.09188 cm} p{0.3033 cm} x{1.63782 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{3.833cm}}{\bf\textcolor{white}{Search (cont)}}  \tn
% Row 16
\SetRowColor{LightBackground}
Search Results & yes & Displays the results of a search query. \tn 
% Row Count 2 (+ 2)
% Row 17
\SetRowColor{white}
Sort Results & no & Enables users to switch the sorting criteria for search results. \tn 
% Row Count 6 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}