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

oOverlayContentClose

Overlay close button styles.

The output does not include a class definition, and should be wrapped in a selector.

Example

Output button styles

.my-close-button {
    @include oOverlayContentClose();
}

Links

oTypographyGetScale(index, font)

Returns a single list on the scale

parameter type default description
index Number of the scale to return.
font (optional) '' The font to get the scale number for, as fonts may have different scales. Uses the default scale if not specified.

Returns

List - List of the requested scale value.

Links

oTypographyMaxLineWidth(optimal-characters-per-line)

Returns a maximum line width based on the given scale

parameter type default description
optimal-characters-per-line number of the characters per line

Returns

String - maximum line width in ch

Links

oTypographyGetFontFamily(type)

Get font family for o-typography type i.e "sans", "serif", or "display". Note: we do not recommend setting font-family this way. Instead use mixins oTypographySans, oTypographySerif, oTypographyDisplay without any arguments.

parameter type default description
type One of 'sans', 'serif', or 'display'.

Returns

String - The font-family set for the given font style.

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

oTypographyHeading(level)

Output styles for page headings.

parameter type default description
level The heading level 1-5.

Examples

Example #1

heading level 1 styles.

h1 {
	@include oTypographyHeading($level: 1);
}

Example #2

heading level 5 styles.

h5 {
	@include oTypographyHeading($level: 5);
}

Links

oTypographyBody

Body text styles

Links

oTypographySub

Subscript text

Links

oTypographySuper

Superscript text

Links

oTypographyList(type, include-base-styles)

Output styles for lists. Styles child li elements. Apply to a containing list element such as ul or ol. Does not output font styles, these are inherited (@see oTypographyBody).

parameter type default description
type (optional) null "ordered", "unordered", or null for just the base styles shared by all lists
include-base-styles (optional) true set to false to exclude base styles which are shared by all list types

Examples

Example #1

the styles for an unordered list.

.my-unordered-list {
	@include oTypographyList('unordered');
}

Example #2

the styles for an ordered and unordered list, sharing base list styles.

.my-list {
	@include oTypographyList();
}

.my-list--ordered {
	@include oTypographyList('ordered', $include-base-styles: false);
}

.my-list--unordered {
	@include oTypographyList('unordered', $include-base-styles: false);
}

Links

oTypographyFooter

Style for <footer> tags

Links

oTypographyCaption

Styles for photo or video credit/caption

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
Switch component view

GitHub: o-message@5.4.1

Install o-message

If using the Build Service, add o-message@^5.4.1 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@^5.4.1".

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