The article page provides users with a comprehensive experience, allowing them to read a wide range of articles, bookmark their favourites for easy access later and ability to share. Figma kit can be found here

Defining your article page

In your Bolt app, the article page can be fully customised using the Pugpig design kit to enhance user experience and functionality. Here’s how you can design your article page:

Toolbar

The toolbar is an essential part of navigation and interaction on the article page. It includes:

• Back Button (Top Left): This allows users to return to the previous page seamlessly.
• Bookmark and Share Buttons (Top Right): These buttons let users save their favorite articles and share them with others.

Article Layout

Below the toolbar, the article layout is structured to provide a clean and engaging reading experience:

• Title of the Article: Positioned prominently below the toolbar, the title should be clear and attractively styled to draw the reader’s attention.
• Body of the Article: The main content area can be customised to include various elements:
  • Images: Add visual interest and support the text with relevant images. Captions should be included to provide context and additional information.
  • Author Details: Include the author’s name, photo, and a short bio to give credit and add a personal touch.
  • Article Details: Display publication date, reading time, and other relevant metadata.
  • Audio Option: If available, users can listen to the article, providing an alternative to reading.
  • Subheadings: Break up the text into sections for easier navigation and better readability.
  • Quotes: Highlight important points or interesting quotes to capture attention and emphasise key messages.
  • Lists: Use bullet points or numbered lists to organise information clearly and concisely.
     

Related Articles

At the end of the article, you can enhance user engagement by displaying related articles. This encourages readers to explore more content and stay longer on your app.
By using the Pugpig design kit, you can easily customize each of these components to fit your brand’s style and meet your users’ needs. This flexibility ensures that your article page is not only functional but also visually appealing and aligned with your overall app design.