Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Card

Cards are a type of content block that display site content in a manner similar to a playing card. Cards are more flexible than other content blocks and can include a variety of elements, such as text, images, icons, or buttons. Like other content blocks, cards are typically displayed in groups as the portfolio module.

.m-card
  .m-card__container
    %a.m-card__details.m-card__details--sop{href: "#"}
      %h2.m-card__heading Statement of Participation
      %p.m-card__course Swallowing difficulties and medicines
      %p.m-card__organisation UEA (University of East Anglia
      .m-card__logo
        %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}

.m-card.m-card--ghost
  .m-card__container
    %a.m-card__details{href: "#"}
      %p.m-card__course Good Brain, Bad Brain: Parkinson's Disease
      %p.m-card__organisation University of Birmingham
      %p.o-profile-available__cta.a-button Buy now

Portfolio

Portfolio is a group of cards displayed in a responsive list and is used to celebrate learner achievements in a visually pleasing way. Each card represents an achievement and becomes part of a portfolio when displayed together.

.m-portfolio
  %ul.m-portfolio__list
    %li.m-portfolio__certificate.m-card
      .m-card__container
        %a.m-card__details.m-card__details--sop{href: "#"}
          %h3.m-card__heading Statement of Participation
          %p.m-card__course Swallowing difficulties and medicines
          %p.m-card__organisation UEA (University of East Anglia
          .m-card__logo
            %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}
    %li.m-portfolio__certificate.m-card
      .m-card__container
        %a.m-card__details.m-card__details--sop{href: "#"}
          %h3.m-card__heading Statement of Participation
          %p.m-card__course Swallowing difficulties and medicines
          %p.m-card__organisation UEA (University of East Anglia
          .m-card__logo
            %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}
    %li.m-portfolio__certificate.m-card
      .m-card__container
        %a.m-card__details.m-card__details--sop{href: "#"}
          %h3.m-card__heading Statement of Participation
          %p.m-card__course Swallowing difficulties and medicines
          %p.m-card__organisation UEA (University of East Anglia
          .m-card__logo
            %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}
    %li.m-portfolio__certificate.m-card
      .m-card__container
        %a.m-card__details.m-card__details--sop{href: "#"}
          %h3.m-card__heading Statement of Participation
          %p.m-card__course Swallowing difficulties and medicines
          %p.m-card__organisation UEA (University of East Anglia
          .m-card__logo
            %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}
    %li.m-portfolio__certificate.m-card
      .m-card__container
        %a.m-card__details.m-card__details--sop{href: "#"}
          %h3.m-card__heading Statement of Participation
          %p.m-card__course Swallowing difficulties and medicines
          %p.m-card__organisation UEA (University of East Anglia
          .m-card__logo
            %img.a-logo.a-logo--university-of-east-anglia{src: "https://ugc.futurelearn.com/uploads/images/cd/da/cdda9622-2180-4c0a-ac25-6d93c1de32d3.svg", alt: ""}