Back to Timeline-guidelines

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

The Timeline Component is meant to visualize processes in an easy and intuitive way.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/timeline@17.0.30-alpha.0
  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
Preview

Table of Contents

Edit this section, Opens in new window

Usage

Default

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours. 
<ol class="if timeline">
    <li class="if">
        <span class="if title">Contact authorities</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
    <li class="if">
        <span class="if title">What do I need?</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
    <li class="if">
        <span class="if title">Report</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
</ol>

Without description

  1. Contact authorities
  2. What do I need?
  3. Report
  4. Confirmation 
<ol class="if timeline">
    <li class="if">
        <span class="if title">Contact authorities</span>
    </li>
    <li class="if">
        <span class="if title">What do I need?</span>
    </li>
    <li class="if">
        <span class="if title">Report</span>
    </li>
    <li class="if">
        <span class="if title">Confirmation</span>
    </li>
</ol>

Expandable

<ol class="if timeline is-expandable">
    <li class="if">
        <span class="if title">Contact authorities</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">What do I need?</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">Report</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">Confirmation</span>
        <details class="if details" open>
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
</ol>

Vertical

  1. Contact authorities Confirmation email, check your inbox. You will hear from us within 24 hours.
  2. What do I need? Confirmation email, check your inbox. You will hear from us within 24 hours.
  3. Report Confirmation email, check your inbox. You will hear from us within 24 hours.
  4. Confirmation Confirmation email, check your inbox. You will hear from us within 24 hours. 
<ol class="if timeline is-vertical">
    <li class="if">
        <span class="if title">Contact authorities</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
    <li class="if">
        <span class="if title">What do I need?</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
    <li class="if">
        <span class="if title">Report</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
    <li class="if">
        <span class="if title">Confirmation</span>
        <span class="if description"
            >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
        >
    </li>
</ol>

Vertical and expandable

<ol class="if timeline is-expandable is-vertical">
    <li class="if">
        <span class="if title">Contact authorities</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">What do I need?</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">Report</span>
        <details class="if details">
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
    <li class="if">
        <span class="if title">Confirmation</span>
        <details class="if details" open>
            <summary class="if summary">Read more</summary>
            <span class="if description"
                >Confirmation email, check your inbox. You will hear from us within 24 hours.</span
            >
        </details>
    </li>
</ol>
Edit this section, Opens in new window
Contact us, Opens in new window