How to use the frontity.styled.h1 function in frontity

{state.theme.featured.showOnList && (
        
      )}

      {/* If the post has an excerpt (short summary text), we render it */}
      {item.excerpt && (
        
      )}
    
  );
};

// Connect the Item to gain access to `state` as a prop
export default connect(Item);

const Title = styled.h1`
  font-size: 2rem;
  color: rgba(12, 17, 43);
  margin: 0;
  padding-top: 24px;
  padding-bottom: 8px;
  box-sizing: border-box;
`;

const AuthorName = styled.span`
  color: rgba(12, 17, 43, 0.9);
  font-size: 0.9em;
`;

const StyledLink = styled(Link)`
  padding: 15px 0;
`;

{state.theme.featured.showOnList && (
        
      )}

      {/* If the post has an excerpt (short summary text), we render it */}
      {item.excerpt && (
        
      )}
    
  );
};

// Connect the Item to gain access to `state` as a prop
export default connect(Item);

const EntryTitle = styled.h1`
  margin: 0;
  @media (min-width: 700px) {
    font-size: 6.4rem;
  }
  @media (min-width: 1200px) {
    font-size: 8.4rem;
  }
`;

const EntryTitleLink = styled(Link)`
  color: #000000;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
`;

// The 404 page component
const Page404 = () => (
  
    Page Not Found
    
      The page you were looking for could not be found. It might have been
      removed, renamed, or did not exist in the first place. Search for:
    
    
  
);

export default Page404;

export const EntryTitle = styled.h1`
  margin: 0;

  @media (min-width: 700px) {
    font-size: 6.4rem !important;
  }

  @media (min-width: 1200px) {
    font-size: 8.4rem !important;
  }
`;

const IntroText = styled.div`
  margin-top: 2rem;
  line-height: 1.5;

  @media (min-width: 700px) {

😕
        
      
    
    );
};

export default Page404;

const Container = styled.div`
  --padding-top: 3;
  --padding-bottom: 1;
  text-align: center;
`;

const Title = styled.h1`
  margin: 0;
  margin-top: 24px;
  margin-bottom: 8px;
  color: rgba(12, 17, 43);
  font-size: 4em;
`;

const Description = styled.div`
  line-height: 1.6em;
  color: rgba(12, 17, 43, 0.8);
  margin: 24px 0;
`;

)}
        
        { data.isPost && libraries.comments &&  }

    
  ) : null;
};

export default connect(Post);

const Postdetails = styled.p`
  --margin-bottom: 2;
`;

const Title = styled.h1`
  --margin-top: 1;
  --margin-bottom: .5;
`

<content>
        
      </content>
    
  ) : null;
};

export default connect(Post);

const Container = styled.div`
  width: 800px;
  margin: 0;
  padding: 24px;
`;

const Title = styled.h1`
  margin: 0;
  margin-top: 24px;
  margin-bottom: 8px;
  color: rgba(12, 17, 43);
`;

const StyledLink = styled(Link)`
  padding: 15px 0;
`;

const Author = styled.p`
  color: rgba(12, 17, 43, 0.9);
  font-size: 0.9em;
  display: inline;
`;

};

const getMaxWidth = props => maxWidths[props.size] || maxWidths["medium"];

export const SectionContainer = styled.div`
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 4rem);
  max-width: ${getMaxWidth};

  @media (min-width: 700px) {
    width: calc(100% - 8rem);
  }
`;

export const PostTitle = styled.h1`
  margin: 0;
  @media (min-width: 700px) {
    font-size: 6.4rem !important;
  }
`;

const PostLink = styled(Link)`
  color: #000000;
  text-decoration: none;
  display: inline-block;
  &:hover {
    text-decoration: underline;
  }
`;

export const PostInner = styled(SectionContainer)`

const HeaderInner = styled.div`
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 2.8rem 0;
  max-width: 168rem;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: 700px) {
    width: calc(100% - 8rem);
  }
`;

const SiteTitle = styled.h1`
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  margin: 0;

  @media (min-width: 1000px) {
    margin: 1rem 0 0 2.4rem;
  }
  @media (min-width: 700px) {
    font-size: 2.4rem;
    font-weight: 700;
  }
`;

const SiteDescription = styled.div`
  margin: 0;

);
};

export default connect(Hero);

const Cta = styled(Link)`
    --font-size: .5;
`;
const Wrapper = styled.section`
    --padding-top: 0;
    --padding-bottom: 2;
    background-color: var(--background-brand-dark);
    transition: background-color 500ms;
`;

const Title = styled.h1`
    --font-size: 3;
    --margin-bottom: 1;
    --line-height: 1.5;
    max-width: 493px;
`;

const Container = styled.div`
    width: var(--container-percentage);
    max-width: var(--container-normal);
    --padding-top: 1;
    margin:0 auto;
`;
const LogoMobile = styled.div`
    --padding-top: 0;
    ${inDesktop} {
        display: none;

export default Header;

const ArchiveHeader = styled.header`
  color: #000000;
  text-align: center;
  background-color: #fff;
  padding: 4rem 0;

  @media (min-width: 700px) {
    padding: 8rem 0;
  }
`;

const ArchiveHeaderInner = SectionContainer;

const ArchiveTitle = styled.h1`
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.026666667em;
  margin: 0;

  @media (min-width: 700px) {
    font-size: 3.2rem;
  }
`;

const ColoredText = styled.span`
  color: ${props => props.color};
  text-transform: capitalize;
`;