<html><head><link rel="canonical" href="https://www.jetbrains.com/help/writerside/section-starting-page.html.md/" data-react-helmet="true"/></head><body># Starting pages

It is good for your readers and for SEO to provide an overview of you documentation and separate sections. These overviews group the most useful and popular topics or those dedicated to a specific subject. You can also use it to provide a learning path for readers: where to begin, which topics are generic and which are more advanced or cover some specific subsystem.

Consider using the starting page markup for the [home page](table-of-contents.html#define_the_home_page) and for any [group of related TOC elements](table-of-contents.html#topic_order_and_hierarchy). The home page of this help is a good example of an overview starting page: [Discover Writerside](discover-writerside.html).

&gt; **Note:**
&gt; Starting pages are not supported for documentation published on the [JetBrains Marketplace](https://plugins.jetbrains.com/).

&gt; **Note:**
&gt; If the  [&lt;section-starting-page&gt;](semantic-markup-reference.html#section-starting-page)  element is present in a topic, Writerside considers it a starting page topic and ignores all other content outside the starting page element.
&gt;
&gt;
&gt;
&gt; For this reason, the starting page markup is not allowed in Markdown topics. Use only XML topics for starting pages. For more information, see [Topic formats](topics.html#topic_formats).

Procedure: Convert topic to starting page

* Add the  [&lt;section-starting-page&gt;](semantic-markup-reference.html#section-starting-page)  element to the root  [&lt;topic&gt;](semantic-markup-reference.html#topic)  element.

Procedure: Create new starting page

* Select the Section starting page template when [creating a topic](add-a-topic.html#create-from-template).

Here is an example of a starting page topic markup:

```XML
<section-starting-page>
    <title>Section starting page title</title>
    <description>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
        condimentum feugiat sagittis.
    </description>

    <spotlight>
        <card href="Topic1.topic" badge="start" summary="Sed condimentum feugiat sagittis">
        <card href="Topic2.topic" badge="search" summary="Sed condimentum feugiat sagittis">
        ...
    </card></card></spotlight>

    <primary>
        <title>Main group</title>
        <card href="Topic.topic" summary="Sed condimentum feugiat sagittis">
        ...
    </card></primary>

    <secondary>
        <title>Highlighted group</title>
        <card href="Topic.topic" summary="Sed condimentum feugiat sagittis">
        ...
    </card></secondary>

    <misc>
        <cards>
            <title>Custom cards</title>
            <card href="Topic.topic" summary="Sed condimentum feugiat sagittis">
            ...
        </card></cards>

        <links narrow="true">
            <group>
                <title>Custom links</title>
                <a href="Topic.topic" summary="Sed condimentum feugiat sagittis">
                ...
            </a></group><a href="Topic.topic" summary="Sed condimentum feugiat sagittis">
            ...
        </a></links><a href="Topic.topic" summary="Sed condimentum feugiat sagittis">
    </a></misc><a href="Topic.topic" summary="Sed condimentum feugiat sagittis">
</a></section-starting-page><a href="Topic.topic" summary="Sed condimentum feugiat sagittis">
```

The  [&lt;section-starting-page&gt;](semantic-markup-reference.html#section-starting-page)  element has some predefined structure:

* Use the [&lt;spotlight&gt;](semantic-markup-reference.html#spotlight) element for two of the most important topics.

* Use the [&lt;primary&gt;](semantic-markup-reference.html#primary) and [&lt;secondary&gt;](semantic-markup-reference.html#secondary) elements for other important and useful topics.

* If necessary, use the [&lt;misc&gt;](semantic-markup-reference.html#misc) element for additional relevant topics. Add groups of [&lt;links&gt;](semantic-markup-reference.html#links) and [&lt;cards&gt;](semantic-markup-reference.html#cards) . For links, use the [&lt;group&gt;](semantic-markup-reference.html#group) element to split them into groups of links. By default, additional miscellaneous groups are rendered in two columns. Add `narrow="true"` to a group if you want to render it in three narrow columns instead

For every `<card>`, you can add an icon, image, or badge:

* Use the `icon` attribute to specify a custom image that will be rendered as a small icon on the card.

* Use the `image` attribute to specify a custom image that will take up the whole top part of the card.

* Use the `badge` attribute to specify one of the built-in badges included with Writerside.

The following built-in badges are available:

* ![academy](https://resources.jetbrains.com/help/img/writerside/academy.svg) `academy`

* ![account](https://resources.jetbrains.com/help/img/writerside/account.svg) `account`

* ![branch](https://resources.jetbrains.com/help/img/writerside/branch.svg) `branch`

* ![bug](https://resources.jetbrains.com/help/img/writerside/bug.svg) `bug`

* ![case](https://resources.jetbrains.com/help/img/writerside/case.svg) `case`

* ![check-list](https://resources.jetbrains.com/help/img/writerside/check-list.svg) `check-list`

* ![cloud](https://resources.jetbrains.com/help/img/writerside/cloud.svg) `cloud`

* ![community](https://resources.jetbrains.com/help/img/writerside/community.svg) `community`

* ![computer](https://resources.jetbrains.com/help/img/writerside/computer.svg) `computer`

* ![container](https://resources.jetbrains.com/help/img/writerside/container.svg) `container`

* ![creative](https://resources.jetbrains.com/help/img/writerside/creative.svg) `creative`

* ![cross-check](https://resources.jetbrains.com/help/img/writerside/cross-check.svg) `cross-check`

* ![cross-platform](https://resources.jetbrains.com/help/img/writerside/cross-platform.svg) `cross-platform`

* ![cup](https://resources.jetbrains.com/help/img/writerside/cup.svg) `cup`

* ![data](https://resources.jetbrains.com/help/img/writerside/data.svg) `data`

* ![development](https://resources.jetbrains.com/help/img/writerside/development.svg) `development`

* ![documents](https://resources.jetbrains.com/help/img/writerside/documents.svg) `documents`

* ![experiment](https://resources.jetbrains.com/help/img/writerside/experiment.svg) `experiment`

* ![file](https://resources.jetbrains.com/help/img/writerside/file.svg) `file`

* ![filtering](https://resources.jetbrains.com/help/img/writerside/filtering.svg) `filtering`

* ![folder](https://resources.jetbrains.com/help/img/writerside/folder.svg) `folder`

* ![idea](https://resources.jetbrains.com/help/img/writerside/idea.svg) `idea`

* ![install](https://resources.jetbrains.com/help/img/writerside/install.svg) `install`

* ![integration](https://resources.jetbrains.com/help/img/writerside/integration.svg) `integration`

* ![key](https://resources.jetbrains.com/help/img/writerside/key.svg) `key`

* ![keyboard](https://resources.jetbrains.com/help/img/writerside/keyboard.svg) `keyboard`

* ![learn](https://resources.jetbrains.com/help/img/writerside/learn.svg) `learn`

* ![library](https://resources.jetbrains.com/help/img/writerside/library.svg) `library`

* ![location](https://resources.jetbrains.com/help/img/writerside/location.svg) `location`

* ![lock](https://resources.jetbrains.com/help/img/writerside/lock.svg) `lock`

* ![mail](https://resources.jetbrains.com/help/img/writerside/mail.svg) `mail`

* ![mixed](https://resources.jetbrains.com/help/img/writerside/mixed.svg) `mixed`

* ![navigation](https://resources.jetbrains.com/help/img/writerside/navigation.svg) `navigation`

* ![network](https://resources.jetbrains.com/help/img/writerside/network.svg) `network`

* ![offer](https://resources.jetbrains.com/help/img/writerside/offer.svg) `offer`

* ![open-source](https://resources.jetbrains.com/help/img/writerside/open-source.svg) `open-source`

* ![presentation](https://resources.jetbrains.com/help/img/writerside/presentation.svg) `presentation`

* ![search](https://resources.jetbrains.com/help/img/writerside/search.svg) `search`

* ![server](https://resources.jetbrains.com/help/img/writerside/server.svg) `server`

* ![settings](https://resources.jetbrains.com/help/img/writerside/settings.svg) `settings`

* ![start](https://resources.jetbrains.com/help/img/writerside/start.svg) `start`

* ![support](https://resources.jetbrains.com/help/img/writerside/support.svg) `support`

* ![thumb-up](https://resources.jetbrains.com/help/img/writerside/thumb-up.svg) `thumb-up`

* ![tools](https://resources.jetbrains.com/help/img/writerside/tools.svg) `tools`

* ![top](https://resources.jetbrains.com/help/img/writerside/top.svg) `top`

* ![turn-on](https://resources.jetbrains.com/help/img/writerside/turn-on.svg) `turn-on`

* ![world](https://resources.jetbrains.com/help/img/writerside/world.svg) `world`

</card></a></body></html>