# List > List components for displaying ordered and unordered lists with different styles. Web: https://react.email/components/list Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`. ## Simple List Source: https://github.com/resend/react-email/tree/canary/apps/web/components/simple-list ### Tailwind ```tsx Top 5 Features of Our Service Top 5 Features of Our Service {[ { number: 1, title: 'Innovative Solutions', description: 'We deliver innovative solutions that drive success and growth.', }, { number: 2, title: 'Exceptional Performance', description: 'Our services deliver high-quality performance and efficiency.', }, { number: 3, title: 'Reliable Support', description: 'We have robust support to keep your operations running smoothly.', }, { number: 4, title: 'Advanced Security', description: 'We implement cutting-edge security measures to protect your data and assets.', }, { number: 5, title: 'Scalable Growth', description: 'We develop customized strategies for sustainable and scalable growth.', }, ].map((feature) => (

{feature.number} {feature.title} {feature.description}

))} ``` ### Inline styles ```tsx Top 5 Features of Our Service Top 5 Features of Our Service {[ { number: 1, title: 'Innovative Solutions', description: 'We deliver innovative solutions that drive success and growth.', }, { number: 2, title: 'Exceptional Performance', description: 'Our services deliver high-quality performance and efficiency.', }, { number: 3, title: 'Reliable Support', description: 'We have robust support to keep your operations running smoothly.', }, { number: 4, title: 'Advanced Security', description: 'We implement cutting-edge security measures to protect your data and assets.', }, { number: 5, title: 'Scalable Growth', description: 'We develop customized strategies for sustainable and scalable growth.', }, ].map((feature) => (

{feature.number} {feature.title} {feature.description}

))} ``` ## List with image on left Source: https://github.com/resend/react-email/tree/canary/apps/web/components/list-with-image-on-left ### Tailwind ```tsx How Our Service Works: 5 Simple Steps How Our Service Works: 5 Simple Steps {[ { number: 1, imageUrl: '/static/stagg-eletric-kettle.jpg', title: 'Start Your Search', description: 'Search for the products you need or upload your list of requirements.', learnMoreLink: '#', }, { number: 2, imageUrl: '/static/atmos-vacuum-canister.jpg', title: 'Compare & Save', description: 'Compare prices and offers from different suppliers to find the best deals.', learnMoreLink: '#', }, { number: 3, imageUrl: '/static/bundle-collection.jpg', title: 'Build Your Cart', description: 'Select your desired items and add them to your shopping cart.', learnMoreLink: '#', }, { number: 4, imageUrl: '/static/clara-french-press.jpg', title: 'Enjoy The Benefits', description: 'Receive your products and enjoy the savings and convenience of our service.', learnMoreLink: '#', }, ].map((step) => (

{step.number} {step.title} {step.description} Learn more →

))} ``` ### Inline styles ```tsx How Our Service Works: 5 Simple Steps How Our Service Works: 5 Simple Steps {[ { number: 1, imageUrl: '/static/stagg-eletric-kettle.jpg', title: 'Start Your Search', description: 'Search for the products you need or upload your list of requirements.', learnMoreLink: '#', }, { number: 2, imageUrl: '/static/atmos-vacuum-canister.jpg', title: 'Compare & Save', description: 'Compare prices and offers from different suppliers to find the best deals.', learnMoreLink: '#', }, { number: 3, imageUrl: '/static/bundle-collection.jpg', title: 'Build Your Cart', description: 'Select your desired items and add them to your shopping cart.', learnMoreLink: '#', }, { number: 4, imageUrl: '/static/clara-french-press.jpg', title: 'Enjoy The Benefits', description: 'Receive your products and enjoy the savings and convenience of our service.', learnMoreLink: '#', }, ].map((step) => (

{step.number} {step.title} {step.description} Learn more →

))} ```