Clay CSS v3.9.0

Timelines

Place timeline-increment inside whatever element you want it to be aligned to. The element must be positioned relative. For the example below, we place it inside the panel-heading element. This vertically centers the icon and label relative to the panel-heading.

The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and increment (Timeline Spacing) must be adjusted to accomodate it.

  • In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
  • In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
  • In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
  • The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.

Timeline Increment with Text

Place text inside timeline-increment by wrapping the text with <span class="timeline-increment-text"></span>.

  • Jan 1
    The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.
  • Apr 22
    The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.
  • May 29
    The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.
  • Dec 12
    The icon can be any size as long as it is wrapped inside timeline-increment. For larger icons, the spacing between the content and label must be adjusted to accomodate it. The spacing can be adjusted by modifying the $timeline-spacing sass variable, or manually overriding in your css.

Timeline Right

Align increments to the right with timeline-right.

  • Panel Text #1
  • Panel Text #2
  • Panel Text #3

Timeline Center

Add class timeline-center to center your timeline, it displays items on the right by default. To display items on the left, add class timeline-item-reverse to a timeline item.

  • In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
  • Panel Text #2
    LR
    1 hour ago
  • Panel Text #3
    LR
    1 hour ago

Timeline Even

Alternate every other timeline item on the left with class timeline-even.

  • Panel Text #1
    LR
    1 hour ago
  • Panel Text #2
    LR
    1 hour ago
  • Panel Text #3
    LR
    1 hour ago

Timeline Odd

Alternate every other timeline item on the right with class timeline-odd.

  • Panel Text #1
    LR
    1 hour ago
  • Panel Text #2
    LR
    1 hour ago
  • Panel Text #3
    LR
    1 hour ago

Timeline Right XS Only

Align timeline to the right at screen widths 767px and below with timeline-right-xs-only.

  • Panel Text #1
    LR
    1 hour ago
  • Panel Text #2
    LR
    2 hours ago
  • Panel Text #3
    LR
    3 hours ago

Timeline Spacing

Adjust the spacing around the timeline with @include timeline-spacing($outer-spacing, $inner-spacing, $item-padding-y). The last argument is not required and has a default value of 10px.

$outer-spacing sets padding-left on .timeline and padding-right on .timeline-right.

$inner-spacing sets the space between the .timeline-item:before pseudo element and .panel element and is used to calculate the space between the .timeline-item:before pseudo element and .timeline-item-label.

.timeline-spacing-xl {
    @include timeline-spacing(25px, 50px);
}

  • In organic dripper so, body, robust medium pumpkin spice cup, in aged dripper latte extra cup white. And viennese redeye carajillo, beans, mug viennese, carajillo id breve decaffeinated americano crema chicory whipped arabica variety aged robusta. Affogato lungo eu, cultivar at, aged breve and blue mountain roast breve americano aged. Sugar acerbic sweet variety aged café au lait chicory, java, single shot percolator aromatic brewed wings, a, sugar, body, aftertaste organic barista espresso dripper to go. Flavour to go strong steamed mazagran trifecta decaffeinated percolator crema, aged americano rich chicory frappuccino foam white.
  • Panel Text #2
    LR
    1 hour ago
  • Panel Text #3
    LR
    1 hour ago