Date Year Stacked

This kit is a simple option for displaying dates in a month, day and the year format.

Default

Use this kits on table displays or column headers to display a single date format.

import React from 'react'
import { DateYearStacked } from 'playbook-ui'

const DateYearStackedDefault = (props) => {
  return (
    <div>
      <DateYearStacked
          date={new Date()}
      />
      <DateYearStacked
          align="center"
          date={new Date()}
      />
      <DateYearStacked
          align="right"
          date={new Date()}
      />
    </div>
  )
}

export default DateYearStackedDefault

Things to Avoid

• Avoid using this to display dashboard data which can get lost when used in large format.

• Avoid using it as a date range display, instead use the date range kit.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat