Skip to content

DOBT Style Guide

Data

Basic Tables

Default

NameTypeLast updatedStatus
Contest SubmissionsDOCX2 weeks agoPublished
TPS ReportsPDF05/03/2013Approved
U.N. Budget ProposalPDF1 month agoPublished
Zimbabwe BriefingPDFYesterdayRejected
Toggle source

Condensed

Add the .condensed class when the table is likely to take up many rows of the same page.

NameSenderRecipientsOpensReplies
New vlogMax Ophuls13074%63%
Open casting callMax Ophuls1,15080%25%
Outreach / MarketingMax Ophuls200010%2%
Partnership with VesselMax Ophuls666%16%
Studio requestMax Ophuls489%5%
Vlog follow-upMax Ophuls8230%15%
Toggle source

User Block

When displaying the avatar and basic information of a user of the app, employ the user block for visual consistency.

Default

Steve McQueen

Steve McQueen

steve@mcqueen.biz

Toggle source
Steve McQueen

Responding as…

Steve McQueen

steve@mcqueen.biz

Toggle source

Labels

ErrorSuccessInfoWarning

Toggle source

Email Previews

When a DOBT app is able to send plain-text email, use this layout to preview the email's content to the user.

Default

From:
“Max Ophuls” <max@ophuls.biz>
Reply to:
max@ophuls.biz
To:
“Jean-Pierre Melville” <jp@melville.org>
Subject:
New vlog promo request
Sent:
Can you please promote my new weekly vlog on your social media channels?

It would mean the world to me.

Best,
Max
Toggle source

Error State

Used when previewing an email which the app is unable to send, due to user error.

From:
“Max Ophuls” <max@ophuls.biz>
Reply to:
max@ophuls.biz
To:
“Jean-Pierre Melville” <jp@melville.org>
Subject:
New vlog promo request
Sent:
Can you please promote my new weekly vlog on your social media channels?

It would mean the world to me.

Best,
Max
Toggle source

Duplicate State

Used when previewing an email that the user has already sent to the intended recipient.

From:
“Max Ophuls” <max@ophuls.biz>
Reply to:
max@ophuls.biz
To:
“Jean-Pierre Melville” <jp@melville.org>
Subject:
New vlog promo request
Sent:
Can you please promote my new weekly vlog on your social media channels?

It would mean the world to me.

Best,
Max
Toggle source

Use this sidebar to display metadata and secondary actions related to the main content.

Toggle source