Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Graphic Text Group layout component

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "gap" : 1rem,
  "gap-compact" : 0.5rem,
  "margin" : (2em 0),
  "graphic-width" : 3.5rem,
  "rule-border" : true,
  "rule-padding" : 1rem,
  "wrap-breakpoint" : "small",
  "separator-border" : true,
  "separator-gap" : 0.8rem,
);
File Information
  • File: _graphic-text-group.scss
  • Group: graphic-text-group
  • Type: variable
  • Lines (comments): 27-37
  • Lines (code): 39-49

Map Properties

Name Type Default Description
gap CssUnit 1rem The gap between graphic and text.
gap-compact CssUnit 0.5rem The smaller gap applied when the compact modifier is used.
margin List 2em 0 Margin applied to the group.
graphic-width CssUnit 3.5rem The default safe width for the graphic.
rule-border Border true The border style for the rules.
rule-padding CssUnit 1rem The padding applied when using rules.
wrap-breakpoint String "small" The breakpoint name at which the layout wraps to a column.
separator-border Border true The border style for the separator between graphic and text.
separator-gap CssUnit 0.5rem The gap when the separator modifier is used (typically smaller since there are two gaps around the separator).

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _graphic-text-group.scss
  • Group: graphic-text-group
  • Type: mixin
  • Lines (comments): 51-54
  • Lines (code): 56-58

Examples

@include ulu.component-graphic-text-group-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints component styles

File Information
  • File: _graphic-text-group.scss
  • Group: graphic-text-group
  • Type: mixin
  • Lines (comments): 70-73
  • Lines (code): 75-200

Demo

View

Examples

@include ulu.component-graphic-text-group-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _graphic-text-group.scss
  • Group: graphic-text-group
  • Type: function
  • Lines (comments): 60-63
  • Lines (code): 65-68

Examples

@include ulu.component-graphic-text-group-get("property");

Parameters

Name Type Description
$name Map Name of property

Require