Paragraph

Users come to websites to get information. If they can't find answers to all of their questions, they might lose trust in our brand and end up going to another website. Paragraph, or body text, allows for consistent looking detailed and supporting information to assist users with task completion.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Text and data

Demo

Configure: select the dropdowns below to display the variety of options that a paragraph supports.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis elementum neque quis volutpat. Morbi facilisis magna eget eros luctus, ut sollicitudin augue iaculis. Mauris dictum, nisi ut ultricies iaculis, dolor ex viverra mauris, nec euismod nunc nibh id dolor. Suspendisse sed pellentesque tortor, vel auctor velit. Nunc nulla elit, dignissim et ante at, auctor posuere ipsum. Integer volutpat purus ac justo eleifend, sed aliquam nisl imperdiet. Maecenas nec vehicula risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur semper lacus ut feugiat mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut non orci laoreet, malesuada sapien quis, tempor ante. Pellentesque nisi erat, pretium eu varius sit amet, feugiat id turpis. Praesent lobortis massa non quam malesuada, a scelerisque nunc accumsan. Curabitur vulputate ligula et nulla iaculis tincidunt. Maecenas vehicula feugiat luctus. Maecenas egestas ipsum nec sapien pellentesque congue.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Use paragraphs to:


    

  • format long-form writing

  • add details or explain ideas

  • tell the story about your product or service




    






                
                    





    
    
    


Usage examples:


    

  • any body text




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Write clearly and concisely.



    





Highlight keywords when needed.



    





Use bulleted lists for higher scannability.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Write a lengthy paragraph with multiple ideas. This can be visually overwhelming and difficult for users to read.



    





Use copy that was written for other mediums. Web copy should be shorter and clearer to support the way users interact with websites.