Layout and Design Examples
This page contains working examples that demonstrate how product data can be retrieved from the Crown API and rendered on a website. The layouts, components, and styling shown here are intentionally simple and are meant only to illustrate how API data can be consumed, structured, and displayed—not to represent required designs or recommended page layouts.
These examples are meant to be flexible reference implementations. The Crown API simply provides structured product data; how that data is presented is entirely up to you. You are free to use the API to populate your own templates, components, layouts, or design systems in whatever way best fits your site, brand, or platform. The code shown here may be reused, modified, or extended as needed, with your own styling and presentation layered on top.
Example of a Vertical Product Card Layout
|
A vertical “card” layout is a common way to display products. In the examples above, this layout is being driven entirely by the API. If the API were to update the C5’s Load Capacity, that change would automatically appear here without any action from you. Again, what you are seeing on this page are simply layout examples — not a prescription for what your own site should look like. Feel free to change anything: the layout, colors, or which specifications you display. It’s 100% up to you and what works best for your website. |
||
$productSeries-seriesNameSeries: $productSeries-seriesId
$productSpecification-specificationLabel-Load_Capacity: $productSpecification-specificationMeasureImperial-Load_Capacity
$productSpecification-specificationLabel-Maximum_Lift_Height: $productSpecification-specificationMeasureImperial-Maximum_Lift_Height
$localizedProductFeature-applicationsDisplayLabel: $localizedProductFeature-applications
|
$productSeries-seriesNameSeries: $productSeries-seriesId
$productSpecification-specificationLabel-Load_Capacity: $productSpecification-specificationMeasureImperial-Load_Capacity
$productSpecification-specificationLabel-Maximum_Lift_Height: $productSpecification-specificationMeasureImperial-Maximum_Lift_Height
$localizedProductFeature-applicationsDisplayLabel: $localizedProductFeature-applications
|
|
Example of a Horizontal Product Card Layout
A horizontally oriented “card” layout is another common way to present product information, especially when space allows for a wider format. In the example above, this layout is being populated entirely from the API — so if factual data such as the C5’s Load Capacity were updated, that change would automatically appear here.
As with all of the examples on this page, this is simply one suggested way to display the data, not a template you are expected to follow. The design, structure, styling, and which specifications you choose to highlight are completely up to you so that everything aligns with your site’s brand and user experience. The API’s role is only to deliver the accurate, structured product data — how you present it is entirely in your hands.
Example of More Product Details
Below is an example of the PRR API rendering detailed product data for the selected model. The endpoint returns structured JSON containing specifications, features, media assets, and related product information. All content displayed below—including the product image and description—is dynamically generated from the API response for this specific model.
|
Example of a Micro Product Card Layout
|
The Micro Product Card layout offers a clean, concise way to showcase products at a glance — perfect for browse pages, category views, or anywhere you want a light, modern presentation. In this example, each card highlights just the Series Name and a clear indication of what the product is, making it easy for users to quickly understand. Clicking through each card could take you to a full "page" of details on the product or even to a shopping experience. As with all of the layouts shown here, every detail you see — including imagery — is being delivered directly from the API in real time. This micro-card format is simply one creative suggestion for how the data can be displayed. You are free to adapt the layout, styling, and structure in any way that best reflects your brand and fits seamlessly within your site’s design.
|
||||
$productSeries-seriesId$productSeries-seriesName |
$productSeries-seriesId$productSeries-seriesName |
$productSeries-seriesId$productSeries-seriesName |
$productSeries-seriesId$productSeries-seriesName |
$productSeries-seriesId$productSeries-seriesName |