IxDF Design System

“Collapsible Overflow Text” Component

Collapsible overflow text component is used for displaying text based data that can span many lines and as a result take a lot of space in pages. But this component can force a limit to number of lines the to display in its initial collapsed state.

The usefulness of this component lies in the fact that if we set a limit of 3 lines and the actual text only spans 2 lines then expandable features are disabled and we just see a simple text paragraph.

Plain Text Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit rerum! Earum officiis quos voluptatum! Adipisci aliquam atque blanditiis consequatur cupiditate dolore dolorem, doloribus, ea iste laboriosam nisi possimus quae quidem ratione tempora. Consequatur explicabo facere facilis minima porro quos repudiandae sequi tempore, vel velit?

Plain Text with Less Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit rerum! Earum officiis quos voluptatum!

HTML Text Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit rerum! Earum officiis quos voluptatum!
Adipisci aliquam atque blanditiis consequatur cupiditate dolore dolorem, doloribus, ea iste laboriosam nisi possimus quae quidem ratione tempora. Consequatur explicabo facere facilis minima porro quos repudiandae sequi tempore, vel velit?
A alias architecto aut beatae consectetur cumque dicta, dolorem ea facilis id ipsam labore minima molestias mollitia, nam neque, possimus repellendus sit suscipit unde vel veritatis vitae voluptatem voluptates voluptatum?
A accusamus asperiores corporis cupiditate esse facilis modi natus, pariatur totam voluptatibus? Expedita, libero, perferendis. Doloribus eos esse hic, ipsum, laboriosam magnam nesciunt, numquam odit praesentium sapiente veniam veritatis voluptate?
At blanditiis consequatur perferendis! Ad animi ea eius eum illum in molestias quam quod quos ullam! Amet aut deleniti doloribus excepturi hic in, labore, minima neque odio, quibusdam vero voluptatum!

HTML text with image

The component is not built for things other than text but this shows that it can handle simple cases:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit rerum! Earum officiis quos voluptatum!
At blanditiis consequatur perferendis! Ad animi ea eius eum illum in molestias quam quod quos ullam! Amet aut deleniti doloribus excepturi hic in, labore, minima neque odio, quibusdam vero voluptatum!
Our clients: IBM, HP, Adobe, GE, Accenture, Allianz, Phillips, Deezer, Capgemin, Mcafee, SAP, Telenor, Cigna, British Parliment, State of New York

Usage

// minimal usage
@component('components.collapsibleOverflowText')
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi
    expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit
    rerum! Earum officiis quos voluptatum!
@endcomponent

// full customization
@component('components.collapsibleOverflowText', [
    'expandButtonText' => 'Read full description',
    'collapseButtonText' => 'Hide full description',
    'approxLineHeight' => 27,
    'tag' => 'p',
    'maxVisibleLines' => 2,
])
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dignissimos error, excepturi
    expedita non quis repellat. Aut beatae dolor ipsam modi quaerat quisquam reiciendis reprehenderit
    rerum! Earum officiis quos voluptatum!
@endcomponent

Props

  • tag
    string

    The enclosing tag to wrap the content passed by slot.

    Default Value: div

  • maxVisibleLines
    int

    The max number of lines show in collapsed state.

    Default Value: 4

  • approxLineHeight
    int|float

    Approx line height is passed so that we can set initial max-height for content.

    Default Value: 30.6

  • expandButtonText
    string

    The expand button text.

  • collapseButtonText
    string

    The collapse button text.

  • darkBackground
    bool

    Set to true if the background is dark so that overlay can be of right color.