Origami Frontend Components & Services

SassDoc: o-message

oMessage(opts)

Output all o-message features. Accepts an options map to include features granularly. Options include which types, states, and layouts of o-message to include. See the README for more details.

parameter type default description
opts (optional) 'types': ('alert', 'notice', 'action), 'states': ('error', 'success', 'inform', 'neutral', 'inform-inverse', 'warning', 'warning-light', 'feedback'), 'layouts': ('inner')

Examples

Example #1

include all o-message styles.

@include oMessage();

Example #2

include only error and success alert styles.

@include oMessage($opts: (
	'types': ('alert'),
	'states': ('error', 'success'),
));

Links

oMessageAddState(...)

Output a new message state (i.e. theme) which supports one or more types of messages.

parameter type default description
opts the name of the state e.g. 'success'
opts a map of options for the state
types the types of message the state supports e.g. ('alert', 'notice', 'action')

Example

a Pikachu (lemon/slate) state for notice and alert messages.

// Outputs CSS for a custom message state called "pikachu"
// Outputs a modifier class `o-message--pikachu`
@include oMessageAddState(
	$name: 'pikachu', // the custom state is named "pikachu"
	$opts: (
	    'background-color': 'slate', // slate message
	    'foreground-color': 'white', // white text
	    'highlight-color': 'lemon', // lemon highlights with `o-message__content-highlight-color` and a lemon button
	    'button-type': 'primary', // a primary o-buttons button`o-message__content-highlight` highlight copy
	    'icon': 'user', // show a 'user' o-icons icon if used as an alert
), $types: ('notice', 'alert')); // this state should work with notice and alert message types

Links

o-message-is-silent

Silent mode: on (true) or off (false) Set to false to output default message classes

Links

o-message-states

List of states that can be applied to alert type messages

Links

o-message-types

List of message types

Links

oMessage(opts)

Output all o-message features. Accepts an options map to include features granularly. Options include which types, states, and layouts of o-message to include. See the README for more details.

parameter type default description
opts (optional) 'types': ('alert', 'notice', 'action), 'states': ('error', 'success', 'inform', 'neutral', 'inform-inverse', 'warning', 'warning-light', 'feedback'), 'layouts': ('inner')

Examples

Example #1

include all o-message styles.

@include oMessage();

Example #2

include only error and success alert styles.

@include oMessage($opts: (
	'types': ('alert'),
	'states': ('error', 'success'),
));

Links

Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-message

If using the Build Service, add o-message@^4.2.6 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-message@^4.2.6".

Help & Support

o-message is maintained directly by the Origami team. If you have any questions about o-message or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com