Skip to content

Custom paragraph element that includes improved styling.

Notifications You must be signed in to change notification settings

pepsico-ecommerce/pep-p

Folders and files

NameName
Last commit message
Last commit date
Mar 26, 2021
Nov 18, 2022
Mar 26, 2021
Nov 18, 2022
Mar 26, 2021
Mar 31, 2021
Dec 14, 2020
Nov 18, 2022
Nov 18, 2022
Nov 9, 2020

Repository files navigation

pep-p

Paragraph elements that support multiline text that will truncate with an ellipsis when the text overflows the parent element. Adds a tooltip attribute on the element with the original non-truncated text.

Examples:

<pep-p>Some text content that will be truncated to fit the parent element without overflowing.</pep-p>

<pep-p>
  Just like regular paragraphs, you can use <b>Phrasing Content</b> elements inside.
  See a list of Phrasing Content elements on <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">mdn</a>
</pep-p>

Install with NPM

Install directly from the PepsiCo github repo.

npm install --save git+https://github.com/pepsico-ecommerce/pep-p.git

How to Use

Import/Include the pep-p once into your project.

import 'pep-p';

###Note: You only need to include import 'pep-p'; once in your project. It registers the Custom Element allowing the browser to understand the <pep-p></pep-p> tag.