Details
Use the Details Pattern to display detailed information as a full-screen page usually depicting things such as articles, products, recipes etc.

The Details Pattern comes with the styling flexibility provided by the Badges, Buttons, Tabs, and Text elements that constitute it.
Icon + Title
Use the Icon + Title Pattern to present a single element from a set of elements through avatar with featured icon or image, title and rich-text description. It can be used for various scenarios, such as product feature description and single step of wizard sequence.
![]()
The Details: Icon + Title Pattern comes with the styling flexibility provided by the Avatar with Icon or Image, Title and Text components that constitute its layout.
Warning
After inserting a Details Pattern, you should trigger Detach from Symbol to break it down to the individual Components that are used to create the Pattern layout in order to be able to generate Angular code. The individual Components, however, must stay intact and not be detached!

![]()
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.