Article3 minutes to read

MDX Elements Showcase

Reference and test page showcasing standard typography, Microsoft Learn-style alerts, procedural steps, and layout components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Typography & Headings#

Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Subsections & Inline Code

Inline code formatting uses a neutral monospace style: process.env.EXPO_PUBLIC_API_URL. Standard text formatting includes bold text, italic emphasis, and tabular figures: 08:00 – 08:45 AM.

Lists & Blockquotes

  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  • Accusantium doloremque laudantium, totam rem aperiam
  • Eaque ipsa quae ab illo inventore veritatis et quasi architecto
“Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore.”

Alerts & Callouts#

Standard Microsoft Docs-style alert callouts featuring a solid 4px left accent bar, subtle gray container, and bold title prefix:

Note

This is a standard informational note highlighting supplementary context or best practices for developers.

Tip

Pro tips provide recommended implementation patterns and productivity shortcuts.

Important

Important notices highlight critical configuration requirements and prerequisites that must not be skipped.

Caution

Caution blocks inform readers about security consequences, data loss risks, or attendance policy enforcement.

Procedural Steps#

Numbered procedural steps designed for straightforward, uncluttered tutorial reading:

1

Initialize the Project Workspace

Clone the project repository and navigate into the root directory of the application:

git clone https://github.com/bcaway/bcaway-docs.git
2

Install Dependencies and Configure Environment

Install the necessary dependencies using your preferred package manager and ensure the local runtime matches the minimum version requirements.

3

Run the Application

Start the development server and verify the application output in your browser or device simulator.

Code Blocks & Terminal#

Code snippet blocks with multi-package manager tabs and one-click copy button:

$npx create-expo-app@latest my-bcaway-app
Console
$bun run build

Tabbed Content#

Tabbed containers for organizing platform-specific instructions without clutter:

Instructions specific to iOS devices. Push alerts and background synchronization are handled via Apple Push Notification service (APNs).

Collapsible Sections#

Accordions allow tucking away troubleshooting details and edge cases:

If push notifications were accidentally declined during initial onboarding, navigate to Settings > BCAway > Notifications on your iOS device and toggle Allow Notifications on.

Data Tables#

Clean HTML tables with subtle border dividers and neutral headers:

FeatureNative iOS AppWeb Application
Push NotificationsSupported (APNs)Manual Refresh
Bell Schedule SyncSupportedSupported
Tactile HapticsSupportedNot Applicable
Offline CachingSQLite DatabaseService Worker