Messages are how we display user generated content provided by our network partners in app.
Come in today and find last minute gifts for every coffee lover on your list. 🎁
import { Message } from '@sproutsocial/racine'
< Message >
< Message.Header >
< MessageMeta messageType = ' Discovered via keyword "coffee" ' density = ' small ' />
< Box display = ' flex ' alignItems = ' center ' >
< Box mr = { 300 } >
< MessageDate color = ' text.subtext ' > 2 mins ago </ MessageDate >
</ Box >
< Message.Checkbox onChange = { ( ) => { } } checked = { false } id = ' exampleMessage ' />
</ Box >
</ Message.Header >
< Message.Body >
< Box mb = { 400 } color = ' text.body ' >
Come in today and find last minute gifts for every coffee lover on your list . 🎁
</ Box >
< TwitterGrid density = ' small ' images = { [ DripCoffee , IcedCoffee , WomanCoffee , Carafe ] } />
< Attribution />
</ Message.Body >
< Message.Footer >
< Message.Button >
< Icon mr = { 400 } name = ' comment-alt-outline ' />
View Conversation
</ Message.Button >
< Box mr = { 200 } >
< Message.Button >
< Icon name = ' circle-check-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' tag-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' tasks-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' reply-outline ' fixedWidth />
</ Message.Button >
</ Box >
</ Message.Footer >
</ Message >
Show More
Properties System props
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
Name Type Default Description Required? densityMESSAGE_DENSITIES"small"
qaObject
childrenunion
innerRefany
borderColorstring"border"
bgstring"neutral.0"
indentContentbooleantrue
Density The density prop allows us to render three different sizes of Message.
In most message streams, density is a user controlled toggle.
Subcomponents All messages are composed from at least one of three subcomponents. In most cases, using all three subcomponents will be necessary. However, use cases may vary and not all subcomponents are required to create a message.
Header Message.Header contains message infomation like message type, profile, and timestamp. The right side of Message.Header is always reserved for bulk controls when available.
Body Message.Body contains the message content like message text, images, attribution, and metadata.
Footer Message.Footer contains message actions and, in some cases, stats when available.
Recipes Editorial message with stats Only uses 2 subcomponents Message.Body and Message.Footer Demonstrates interesting Message.Body content variation Uses left half of Message.Footer for stats
New York Times · 5 days ago11 Emerging Artists Redefining Abstract Painting A new generation of painters, all 40 years old or younger, are rethinking what we might call, for lack of a better term, abstraction. Read full article < Message indentContent = { false } >
< Message.Body display = ' flex ' >
< Box flex = ' 0 0 33% ' pr = { 400 } >
< Image alt = ' The entryway at Sprout Social HQ ' src = { withPrefix ( '/example-photo.jpg' ) } height = ' auto ' width = ' 100% ' />
</ Box >
< Box flex = ' 0 0 67% ' display = ' flex ' flexDirection = ' column ' >
< Text fontSize = { 200 } color = ' text.subtext ' mb = { 300 } > < Text fontWeight = ' bold ' > New York Times </ Text > · 5 days ago </ Text >
< Text fontSize = { 300 } color = ' text.headline ' fontWeight = ' bold ' mb = { 350 } > 11 Emerging Artists Redefining Abstract Painting </ Text >
< Text fontSize = { 200 } color = ' text.body ' mb = { 300 } > A new generation of painters , all 40 years old or younger , are rethinking what we might call , for lack of a better term , abstraction . </ Text >
< Link href = ' # ' fontSize = { 200 } > Read full article </ Link >
</ Box >
</ Message.Body >
< Message.Footer >
< Box display = ' flex ' flex = ' 1 0 33% ' px = { 350 } flexWrap = ' wrap ' alignItems = ' center ' >
< Text mr = { 350 } mt = { 200 } color = ' text.body ' fontSize = { 300 } fontWeight = ' bold ' > 38.3 k </ Text >
< Box mr = { 350 } >
< Icon mr = { 300 } color = ' network.twitter ' name = ' twitter ' />
< Text color = ' text.body ' fontSize = { 100 } fontWeight = ' bold ' > 20 k </ Text >
</ Box >
< Box mr = { 350 } >
< Icon mr = { 300 } color = ' network.facebook ' name = ' facebook ' />
< Text color = ' text.body ' fontSize = { 100 } fontWeight = ' bold ' > 20.4 k </ Text >
</ Box >
< Box >
< Icon mr = { 300 } color = ' network.pinterest ' name = ' pinterest ' />
< Text color = ' text.body ' fontSize = { 100 } fontWeight = ' bold ' > 4 k </ Text >
</ Box >
</ Box >
< Box display = ' flex ' flexWrap = ' wrap ' pr = { 300 } >
< Message.Button >
< Icon name = ' dotdotdot ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon mr = { 300 } name = ' bambu-icon ' />
Send to Bambu
</ Message.Button >
< Message.Button >
< Icon mr = { 300 } name = ' compose ' />
Send to Compose
</ Message.Button >
</ Box >
</ Message.Footer >
</ Message >
Show More
Retweet with comment Uses a Message inside of a Message Standard, run of the mill usage of Message
< Message >
< Message.Header >
< MessageMeta messageType = ' Schedule message ' density = ' small ' />
< MessageDate color = ' text.subtext ' > 2 mins ago </ MessageDate >
</ Message.Header >
< Message.Body >
< Box mb = { 400 } color = ' text.body ' >
Dang it , Cubs !
</ Box >
< Message density = { Message . DENSITIES . COMPACT } >
< Message.Header >
< MessageMeta density = ' compact ' />
</ Message.Header >
< Message.Body >
Commentary : #cubs have nobody to blame but themselves : < Link href = ' # ' > http : / / t . co / SRS5CnQHy1 </ Link >
</ Message.Body >
</ Message >
</ Message.Body >
< Message.Footer >
< Message.Button >
< Icon mr = { 400 } name = ' comment-alt-outline ' />
Comment
</ Message.Button >
< Box mr = { 200 } >
< Message.Button >
< Icon name = ' trash-can-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' publishing-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' duplicate-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' internal-activity-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' message-preview-outline ' fixedWidth />
</ Message.Button >
< Message.Button >
< Icon name = ' pencil-outline ' fixedWidth />
</ Message.Button >
</ Box >
</ Message.Footer >
</ Message >
Show More
Note Uses Message in a way that looks totally different
Headline This is a note with very important information regarding something noteworthy.
< Message bg = ' aqua.100 ' borderColor = ' aqua.400 ' >
< Message.Header >
< Box >
< Icon mr = { 350 } name = ' sticky-note ' />
< Text > Note </ Text >
</ Box >
< Text > 1 / 10 / 2020 </ Text >
</ Message.Header >
< Message.Body indentContent = { false } >
< Box display = ' flex ' flexDirection = ' column ' >
< Text color = ' text.headline ' fontSize = { 400 } fontWeight = ' bold ' > Headline </ Text >
< Text mt = { 350 } color = ' text.body ' > This is a note with very important information regarding something noteworthy . </ Text >
</ Box >
</ Message.Body >
< Message.Footer ml = { 350 } indentContent = { false } >
< Box display = ' flex ' alignItems = ' center ' >
< Box height = ' 24px ' width = ' 24px ' bg = ' purple.700 ' borderRadius = ' 30% 0px 30% 0px ' display = ' flex ' alignItems = ' center ' justifyContent = ' center ' mr = { 300 } >
< Text color = ' neutral.0 ' fontSize = { 100 } fontWeight = ' bold ' > NS </ Text >
</ Box >
< Text fontSize = { 200 } > by Nate Sanders </ Text >
</ Box >
< Box >
< Message.Button >
< Icon name = ' trash-can-outline ' />
</ Message.Button >
< Message.Button >
< Icon name = ' duplicate-outline ' />
</ Message.Button >
< Message.Button >
< Icon name = ' pencil-outline ' />
</ Message.Button >
</ Box >
</ Message.Footer >
</ Message >
Show More
