Simple classes to align media or content within paragraphs:
align-left
align-right
align-center
⚠️ Important
The alignment can not be seen on client without a width on the element. The demo adds a width.
☞ Remember
The benefit of these classes instead of other solutions (e.g.
style="float:right"
):
- Spacing is consistent and aware of its own alignment.
- No need for deprecated
<img align="…">
attribute.- No need for deprecated
<center>
element.
ⓘ Notice
These classes are from Django CMS Picture (source), but suitable for general usage, especially in TACC-Docs, which does not use Django CMS.
<dl>
<dt>Images</dt>
<dd>
<img class="align-right" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img class="align-left" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p>Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.</p>
<img class="align-center" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</dd>
<dt>Figures</dt>
<dd>
<figure class="align-right">
<img class="align-right" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<figcaption>
I am a <figcaption> within a <figure>.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
I may be wider than image. If so, should I wrap?
</span>
</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<figure class="align-left">
<img class="align-left" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<figcaption>
I am a <figcaption> within a <figure>.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
I may be wider than image. If so, should I wrap?
</span>
</figcaption>
</figure>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p>Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.</p>
<figure class="align-center">
<img class="align-center" src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" alt="(sample image)" />
<figcaption>
I am a <figcaption> within a <figure>.
<span class="
c-message
c-message--type-warning
c-message--scope-inline
">
I may be wider than image. If so, should I wrap?
</span>
</figcaption>
</figure>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</dd>
<dt>Figure Blockquotes<br />
<small>i.e. <code><figure class="s-blockquote"></code></small>
</dt>
<dd>
<figure class="s-blockquote align-right">
<blockquote>
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<figure class="s-blockquote align-left">
<blockquote>
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p>Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.</p>
<figure class="s-blockquote align-center">
<blockquote>
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</dd>
<dt>Blockquotes</dt>
<dd>
<blockquote class="align-right">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<blockquote class="align-left">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<p>Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.</p>
<blockquote class="align-center">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.align-right,
.align-left,
.align-center {
max-width: 50%; /* a default is sensible, but leave it to client */
}
{
"shouldSkipPattern": false,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"📝 shouldSkipPattern": "because core-styles.….css does not import this"
}