Quotations live

Quotations highlight and support points within content.

Usually quotes come from someone with experience or authority in a subject area. It could be an expert or someone who has used a product or service.

If you’re using them on a digital platform you need to make sure that they are going to help the user do what they came to do.

Example

Example

‘Use hanging punctuation to style a quotation. A “quote within a quote” should use double quotation marks.’

The design team

‘Or you can have a bigger one.’

The design team

HTML

                            
<blockquote>
    <p>&lsquo;Use hanging punctuation to style a quotation. A &#8220;quote within a quote&#8221; should use double quotation&nbsp;marks.&rsquo;</p>
    <cite>The design team</cite>
</blockquote>

<blockquote>
    <p class="coop-beta">‘Or you can have a bigger&nbsp;one.’</p>
    <cite>The design team</cite>
</blockquote>

                            

CSS

                            @import "@coopdigital/foundations-vars";
@import "_fonts.css";

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p,
address,
.coop-h1,
.coop-h2,
.coop-h3,
.coop-h4,
.coop-h5,
.coop-h6 {
  font-family: var(--font-family);
  font-weight: normal;
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.coop-h1,
.coop-h2,
.coop-h3,
.coop-h4,
.coop-h5,
.coop-h6 {
  font-weight: bold;
}

p {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  &:last-child {
    margin-bottom: var(--spacing-medium--1-2);
  }

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

ul,
ol {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

.coop-h-mega {
  font-weight: bold;
  font-size: var(--type-base--h-mega);
  line-height: 1.385;
  margin-bottom: var(--spacing-base--1-2);
  padding-top: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h-mega);
    margin-bottom: var(--spacing-medium--1-2);
    padding-top: var(--spacing-medium--1-2);
  }
}

h1,
.coop-h1 {
  font-size: var(--type-base--h1);
  line-height: 1.4;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h1);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h2,
.coop-h2 {
  font-size: var(--type-base--h2);
  line-height: 1.55;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h2);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h3,
.coop-h3 {
  font-size: var(--type-base--h3);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h3);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h4,
.coop-h4 {
  font-size: var(--type-base--h4);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h4);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h5,
.coop-h5 {
  font-size: var(--type-base--h5);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h5);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h6,
.coop-h6 {
  font-size: var(--type-base--h6);
  line-height: 1.5;
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h6);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

small,
.coop-smallprint {
  line-height: 1.25;
  font-size: var(--type-base--small);
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--small);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

hr,
.coop-hr {
  display: block;
  margin: 2rem 0 3rem;
  border-style: solid;
  border-color: var(--color-grey-mid);
  border-width: 0 0 1px;
  height: 0;
  color: var(--color-grey-mid);

  &.dashed {
    border-style: dashed;
  }
}

.coop-regular {
  font-weight: normal;
  font-style: normal;
}

.coop-italic,
.coop-em {
  font-weight: normal;
  font-style: italic;
}

.coop-bold,
.coop-strong {
  font-weight: bold;
  font-style: normal;
}

.coop-medium {
  font-weight: 500;
  font-style: normal;
}

.coop-bold-italic {
  font-family: bold;
  font-style: italic;
}

blockquote,
.coop-blockquote {
  margin-bottom: var(--spacing-base--1-2);
  margin-left: var(--spacing-base--1-4);
  padding-left: var(--spacing-base--1-4);

  &:before,
  &:after {
    content: '';
    display: block;
    width: 45px;
    height: 6px;
    margin-top: var(--spacing-base--1-4);
    margin-right: 0;
    margin-bottom: var(--spacing-base--1-4);
    margin-left: var(--spacing-base--1-4);
    background: var(--color-grey-light);
  }

  @media (--mq-medium) {
    margin-left: var(--spacing-base--1-2);
  }

  p {
    margin-bottom: var(--spacing-base--1-4);
    font-style: normal;
    font-weight: normal;
    text-indent: -0.25rem;

    &.alpha,
    &.beta {
      font-style: normal;
      font-weight: normal;
    }
  }

  cite {
    font-size: var(--type-base--body);
    font-style: normal;
    margin-top: var(--spacing-base--1-4);
  }
}

cite,
.coop-blockquote__cite {
  display: block;
  font-size: 0.75rem;
}


del,
.coop-line-through {
  text-decoration: line-through;
}

address {
  font-weight: normal;
  font-style: normal;
}

.coop-intro-text {
  font-size: var(--type-base--lead);
  line-height: 1.6;
  margin-bottom: var(--spacing-base--1-8);
}

p + ul {
  margin-top: calc(-1 * var(--spacing-base--1-8));

  @media (--mq-medium) {
     margin-top: calc(-1 * var(--spacing-medium--1-8));
  }
}

dl,
.coop-definition-list {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--spacing-base--1-2);

  dt {
    font-family: var(--font-family);
    font-weight: bold;
    margin-bottom: 0;
  }

  dd {
    font-family: var(--font-family);
    margin: 0 0 var(--spacing-base--1-4);
  }
}

.coop-undecorated-list,
.coop-list-bare {
  list-style-type: none;
  padding: 0;
}

.coop-list-inline {
  list-style-type: none;
  padding: 0;

  li {
    display: inline-block;
  }
}

/* ===================================
 * Links - Co-op Front-end Foundations
 * =================================== */

a {
  color: var(--color-link);
  border-bottom: 0.05em solid var(--color-link);
  text-decoration: none;

  &:hover {
    color: var(--color-link--hover);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-link--focus);
    outline-offset: 3px;
  }
}

.link-white {
  color: var(--color-white);
  border-bottom: 0.05em solid var(--color-white);
  text-decoration: none;

  &:hover {
    color: var(--color-white);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-white);
    outline-offset: 3px;
  }
}

.link-black {
  color: var(--color-black);
    border-bottom: 0.05em solid var(--color-black);
    text-decoration: none;

    &:hover {
      color: var(--color-black);
      border: 0;
    }

    &:active,
    &:focus {
      transition: none;
      outline: 2px dotted var(--color-black);
      outline-offset: 3px;
    }
}

                            

Design and content

Use quotations when you:

  • want to refer to what someone said, not to pull out text written within the page copy
  • are referring to an external source - remember to cite the author and if possible link to their original work
  • are knowingly using a jargon word after giving a plain English description, for example, ‘the people you want to sort out your will (known as ‘executors’)’

Our quotations use hanging punctuation when using this pattern. This means the opening quotation mark must sit in the margin so as not to disrupt the flow (left alignment) of the text. If the quote is within the text (on the same line) it would not hang.

When marking up quotes in HTML - use true quotation marks. True quotes are called smart quotes and the right one must be used according to whether you are opening (‘) or closing (’) a quotation. Find out about HTML character codes to use for quotes.

Accessibility

Our quotations are marked up with the blockquote element (for the quotation text) and the cite element for referring to the author of the quote. According to the W3C, the “blockquote element represents a section that is quoted from another source.” So, when you use this pattern, do not to use it to refer to text within the same page.

Variations

As in the example above - you can use larger text for the quotation if the text is shorter.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change