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

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

Functional grouping: Text and data


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.



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


Write clearly and concisely.

Highlight keywords when needed.

Use bulleted lists for higher scannability.


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.