Springboard

Inline 

<p>
    Here are some <mark>marked words</mark>, and…
    <br /> some <em>emphasized words</em> and…
    <br /> some <strong>strong text</strong> and…
    <br /> an <i>i element</i> and…
    <br /> a <b>b element</b> and…
    <br />
    <q>This is an inline quote</q> and…
    <br /> this is <code>someCode() { }</code> and…
    <br /> this is a superscript<sup>1</sup> and a subscript<sub>2</sub> and…
    <br /> this is an abreviation <abbr title="Hypertext Markup Language"> HTML</abbr> and…
    <br /> this is a time: <time datetime="2015-05-14T00:00:00">May 14, 2015</time> and …
</p>
 
<p>
Here are some <mark>marked words</mark>, and…
<br />
some <em>emphasized words</em> and… 
<br />
some <strong>strong text</strong> and…
<br />
an <i>i element</i> and…
<br />
a <b>b element</b> and…
<br /> 
<q>This is an inline quote</q> and…
<br />
this is <code>someCode() { }</code> and…
<br />
this is a superscript<sup>1</sup> and a subscript<sub>2</sub> and… 
<br />
this is an abreviation <abbr title="Hypertext Markup Language"> HTML</abbr> and…
<br />
this is a time: <time datetime="2015-05-14T00:00:00">May 14, 2015</time> and …
</p>
 
/* No context defined for this component. */
  • Content: 
    strong, b {
  color: #333;
  font-weight: bold;
}

em, i {
  font-style: italic;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

mark {
  background: #ff0;
  font-weight: 400;
  font-style: normal;
}

abbr {
  border-bottom: dotted 1px #ccc;
}

q:before {
  content: "“";
}

q:after {
  content: "”";
}

code {
  background: #f3f3f3;
  padding: 0 .3em;
  border: solid 1px #ddd;
  border-radius: .2em;
  font-family: $font-stack-mono;
  font-size: 90%;
  font-style: normal;
  text-transform: none;
}
  • URL: /components/raw/inline/_sass.scss
  • Filesystem Path: components/01-elements/01-text/inline/_sass.scss
  • Size: 612 Bytes

There are no notes for this item.