You can select from several different styles of layouts (for example, by default, you can select either a tiles or tree style of layout). Furthermore, each layout includes a collection of skins that you can choose from, or you can customize your own.
The Main Page is the home page generated in the WebHelp Responsive output. The main function of the home page is to display top-level information and provide links that help you easily navigate to any of the top-level topics of the publication. These links can be rendered in either a Tiles or Tree style of layout. The main page also consists of various other components, such as a logo, title, menu, search field, or index link.
In the tiles presentation mode, a tile component is created for each chapter (first-level topic) in the publication. The tile presents a link to the topic and its short description.
In the tree presentation mode, links to the first and second level topics in the publication are displayed using a tree-like component.
The layout components displayed in the main page are:
Displays a logo associated with the publication. Additionally, you can set a target URL that will be opened when you click on the logo image.
The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.
A tile associated with a main topic. Each topic tile has three sections that correspond to the topic title, short description, and image.
The Topic Page is the page generated for each DITA topic in the WebHelp Responsive output. The HTML pages produced for each topic consist of the topic content along with various other additional components, such as a title, menu, navigation breadcrumb, print icon, or side table of contents.
The layout components displayed in this page are:
Displays a logo associated with the publication. Additionally, you can set a target URL that will be opened when you click on the logo image.
The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.
Previous / 
Next arrows) can be used to navigate to the previous or next topic.
These navigation links are controlled by the collection-type attribute.
For example, if you set collection-type="sequence" on a parent
topic reference, navigation links will be generated in the output for that topic and
all of its child topics. You can also use the
webhelp.default.collection.type.sequence parameter and set its
value to yes to generate navigation links for all topics,
regardless of whether or not the collection-type attribute is
present.webhelp.show.navigation.links parameter to
no.
button to collapse the
table of contents ( or the 
button to
expand it).<section> elements and each
<section> must have an @id attribute. You
can use the button to collapse the table
of contents ( or the button to expand
it).The Search Page presents search results in the WebHelp Responsive output. The HTML page consists of a search results component along with various other additional components, such as a title, menu, or index link.
When you enter search terms in the
Search field, the results are displayed in a results page. When you
click on a result, the topic is opened in the main pane and the search results are
highlighted. If you want to remove the colored highlights, click the 
Toggle Highlights button at the
top-right side of the page. The Search field also includes an
autocomplete feature.
The layout components displayed in the search page are:
Displays a logo associated with the publication. Additionally, you can set a target URL that will be opened when you click on the logo image.
The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.
Each result includes the topic title that can be clicked to open that page. Under the title, a breadcrumb is displayed that shows the path of the topic and you can click any of the topics in the breadcrumb to open that particular page.
<prolog>
<metadata>
<keywords><indexterm>databases</indexterm></keywords>
<keyword>installing</keyword>
<keyword>uninstalling</keyword>
<keyword>prerequisites</keyword>
</metadata>
</prolog>If you enter multiple search terms (other than stop words), for any result that the search engine found at least one term but not one or more of the other terms, the Missing terms will be listed below each result.
The Index Terms Page page consists of an index terms section along with various other additional components, such as a title, menu, or search field.
An alphabet that contains the first letter of the documentation index terms is generated at the top of the index page. Each letter represents a link to a specific indices section. The indexes are presented in multiple columns to make it easier to read this page.
The layout components displayed in this page are:
Displays a logo associated with the publication. Additionally, you can set a target URL that will be opened when you click on the logo image.
The logo image can be specified using the webhelp.logo.image transformation parameter. For the target URL, use the webhelp.logo.image.target.url parameter.