Date Stacked

Use to display the date, stacking month and day. Year will not show if it is the current year.

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isMonthStacked: true
  )
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title3,
    isMonthStacked: true
  )
}

Not Current Year

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    alignment: .leading,
    date: Date().makeDate(year: 2018, month: 3, day: 20),
    variant: .standard,
    dateSize: .title4,
    isStandardStacked: true
  )
  PBDateStacked(
    alignment: .leading,
    date: Date().makeDate(year: 2018, month: 3, day: 20),
    variant: .standard,
    dateSize: .title3,
    isStandardStacked: true
  )
}

Day & Month Reverse

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isReversed: true
  )
  PBDateStacked(
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title3,
    isReversed: true
  )
}

Bold

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateStacked(
    alignment: .leading,
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isMonthStacked: true,
    isMonthBold: true
  )
  PBDateStacked(
    alignment: .center,
    date: Date().makeDate(year: 2018, month: 3, day: 20),
    variant: .standard,
    dateSize: .title4,
    isStandardStacked: true,
    isYearBold: true,
    isMonthBold: true
  )
  .frame(maxWidth: .infinity, alignment: .center)
  PBDateStacked(
    alignment: .trailing, 
    date: Date(),
    variant: .short(showIcon: false),
    dateSize: .title4,
    isMonthStacked: true,
    isMonthBold: true
  )
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Props

Name	Type	Description	Default	Values
alignment	`HorizontalAlignment`	Changes the alignment of the date	`.leading`	`.leading` `.trailing`
dateSize	`PBFont`	Sets the size of the date	`.body`	`.subcaption` `.caption` `.body`
isReversed	`Bool`	Boolean value that determines whether or not the month and date are reversed.	`false`	`true` `false`
isMonthStacked	`Bool`	Boolean value that determines whether or not the month is stacked	`false`	`true` `false`
isStandardStacked	`Bool`	Boolean value that determines whether or not the standard date variant is stacked.	`false`	`true` `false`
isYearBold	`Bool`	Boolean value that determines whether or not the the year is bold	`false`	`true` `false`
isMonthBold	`Bool`	Boolean value that determines whether or not the month is bold.	`false`	`true` `false`

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